Flutter路由管理插件flutter_quick_router的使用

QuickRouter 提供了使用 Navigator 小部件在 Flutter 中导航的方法。它支持常规和可恢复的路由，并提供了多种过渡类型。

开始使用

首先，确保你已经在项目中添加了 flutter_quick_router 依赖项。你可以在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_quick_router: ^x.x.x

然后运行 flutter pub get 来安装该包。

方法

context.to(NewScreen())

此方法将给定的小部件和过渡类型推送到 Navigator 中。它返回一个 Future<T?>，当推送的路由从导航器中弹出时完成。

例如：

context.to(const SecondScreen())

这将在默认淡入淡出过渡下导航到第二个屏幕。

context.back(result)

此方法从 Navigator 中弹出现有路由并返回一个可选的结果。结果可以是任何类型，并且将传递给前一个路由。

例如：

context.back('Hello from second')

这将以字符串结果返回到前一个屏幕。

context.pushReplacement(child, result)

此方法将给定的小部件和过渡类型推送到 Navigator 中，并用新的路由替换当前路由。它还返回一个可选的结果到前一个路由。

例如：

context.pushReplacement(const ThirdScreen(), result: 'Hello from home')

这将用第三个屏幕替换当前屏幕，并将字符串结果传递给主屏幕。

context.pushAndRemoveUntil(child, predicate)

此方法将给定的小部件和过渡类型推送到 Navigator 中，并移除所有之前的路由，直到满足谓词条件。谓词是一个接受路由作为参数并返回布尔值的函数。

例如：

context.pushAndRemoveUntil(const FourthScreen(), (route) => route.isFirst)

这将移除除了第一个之外的所有路由，并导航到第四个屏幕。

context.restorablePushAndRemoveUntil(newRouteBuilder, predicate, arguments)

此方法将给定的可恢复路由和参数推送到 Navigator 中，并移除所有之前的路由，直到满足谓词条件。它返回一个恢复ID，可用于恢复路由的状态。路由构建器是一个接受上下文和参数作为参数并返回路由的函数。

例如：

context.restorablePushAndRemoveUntil(
  (context, arguments) => MaterialPageRoute(
    builder: (context) => const FifthScreen(),
    settings: const RouteSettings(name: '/fifth'),
  ),
  (route) => false,
  arguments: {'key': 'Some arguments'}
)

这将移除所有路由并导航到第五个屏幕，同时进行恢复和传递参数。

context.replace(old, to)

此方法用给定的小部件和过渡类型替换当前路由。它还保留当前路由的类型参数。

例如：

context.replace(old: this, to: const ThirdScreen())

这将用第三个屏幕替换当前屏幕，并保持相同的结果类型。

context.restorableReplace(old, to, arguments)

此方法用给定的可恢复路由和参数替换当前路由。它还保留当前路由的类型参数，并返回一个恢复ID，可用于恢复路由的状态。

例如：

context.restorableReplace(
  old: this,
  to: (context, arguments) => MaterialPageRoute(
    builder: (context) => const FifthScreen(),
    settings: const RouteSettings(name: '/fifth'),
  ),
  arguments: 'Some arguments'
)

这将用第五个屏幕替换当前屏幕，同时进行恢复和传递参数，并保持相同的结果类型。

context.replaceRouteBelow(anchor, to)

此方法用给定的小部件和过渡类型替换当前路由之下的路由。它还保留当前路由之下路由的类型参数。

例如：

context.replaceRouteBelow(anchor: this, to: const FourthScreen())

这将用第四个屏幕替换当前路由之下的路由，并保持相同的结果类型。

示例代码

以下是完整的示例代码，展示了如何使用 flutter_quick_router 插件的不同方法：

import 'package:flutter/material.dart';
import 'package:flutter_quick_router/quick_router.dart';

QuickTransition defaultTransition = QuickFade();

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'QUICK ROUTER',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                context.to(const SecondScreen(),
                    transitions: defaultTransition);
              },
              child: const Text('Go to second screen'),
            ),
            ElevatedButton(
              onPressed: () {
                context.pushReplacement(const ThirdScreen(),
                    transitions: defaultTransition, result: 'Hello from home');
              },
              child: const Text('Replace with third screen'),
            ),
            ElevatedButton(
              onPressed: () {
                context.pushAndRemoveUntil(
                  const FourthScreen(),
                  transitions: defaultTransition,
                  (route) => route.isFirst,
                );
              },
              child: const Text('Remove all except first and go to fourth screen'),
            ),
            ElevatedButton(
              onPressed: () {
                context.restorablePushAndRemoveUntil(
                  (context, arguments) => MaterialPageRoute(
                    builder: (context) => const FifthScreen(),
                  ),
                  (route) => false,
                  arguments: {'key': 'Some arguments'},
                );
              },
              child: const Text('Remove all and go to fifth screen with restoration'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                context.back('Hello from second');
              },
              child: const Text('Go back with result'),
            ),
            ElevatedButton(
              onPressed: () {
                context.replace(
                    old: this,
                    to: const ThirdScreen(),
                    transitions: defaultTransition);
              },
              child: const Text('Replace with third screen'),
            ),
            ElevatedButton(
              onPressed: () {
                context.replaceRouteBelow(
                  anchor: this,
                  to: const FourthScreen(),
                );
              },
              child: const Text('Replace route below with fourth screen'),
            ),
            ElevatedButton(
              onPressed: () {
                context.restorableReplace(
                  old: this,
                  transitions: defaultTransition,
                  to: (context, arguments) => MaterialPageRoute(
                    builder: (context) => const FifthScreen(),
                    settings: const RouteSettings(name: '/fifth'),
                  ),
                  arguments: 'Some arguments',
                );
              },
              child: const Text('Replace with fifth screen with restoration'),
            ),
          ],
        ),
      ),
    );
  }
}

class ThirdScreen extends StatelessWidget {
  const ThirdScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Third Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                context.to(const HomeScreen(), transitions: defaultTransition);
              },
              child: const Text('Go back with result'),
            ),
          ],
        ),
      ),
    );
  }
}

class FourthScreen extends StatelessWidget {
  const FourthScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Fourth Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                context.back('Hello from fourth');
              },
              child: const Text('Go back with result'),
            ),
          ],
        ),
      ),
    );
  }
}

class FifthScreen extends StatelessWidget {
  const FifthScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Fifth Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                context.back('Hello from fifth');
              },
              child: const Text('Go back with result'),
            ),
          ],
        ),
      ),
    );
  }
}