Flutter快速路由管理插件quick_router的使用

quick_router 是一个用于 Flutter 应用的快速路由管理插件，它简化了路由配置和导航的过程。通过使用 quick_router，开发者可以更方便地管理应用中的页面跳转和路由逻辑。

安装

首先，你需要在 pubspec.yaml 文件中添加 quick_router 依赖：

dependencies:
  flutter:
    sdk: flutter
  quick_router: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

1. 创建路由表

   首先，你需要创建一个路由表，将路由名称映射到相应的页面组件。

   import 'package:flutter/material.dart';
   import 'package:quick_router/quick_router.dart';
   
   class HomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Home')),
         body: Center(
           child: ElevatedButton(
             onPressed: () {
               QuickRouter.of(context).push('/details');
             },
             child: Text('Go to Details'),
           ),
         ),
       );
     }
   }
   
   class DetailsPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Details')),
         body: Center(
           child: ElevatedButton(
             onPressed: () {
               QuickRouter.of(context).pop();
             },
             child: Text('Go Back'),
           ),
         ),
       );
     }
   }
   
   final routes = {
     '/': (context) => HomePage(),
     '/details': (context) => DetailsPage(),
   };
   

2. 配置路由

   在 MaterialApp 中使用 QuickRouter 来配置路由。

   import 'package:flutter/material.dart';
   import 'package:quick_router/quick_router.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'QuickRouter Demo',
         initialRoute: '/',
         onGenerateRoute: QuickRouter.generateRoute(routes),
       );
     }
   }
   

3. 导航

   使用 QuickRouter.of(context) 来进行页面跳转。

   // 跳转到详情页
   QuickRouter.of(context).push('/details');
   
   // 返回上一页
   QuickRouter.of(context).pop();
   
   // 替换当前页面
   QuickRouter.of(context).replace('/newPage');
   
   // 跳转到新页面并清除所有历史记录
   QuickRouter.of(context).pushAndRemoveUntil('/newPage');
   

高级用法

1. 传递参数

   你可以在跳转页面时传递参数，并在目标页面中获取这些参数。

   // 跳转时传递参数
   QuickRouter.of(context).push('/details', arguments: {'id': 123});
   
   // 在目标页面中获取参数
   class DetailsPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       final args = QuickRouter.of(context).arguments as Map<String, dynamic>;
       final id = args['id'];
   
       return Scaffold(
         appBar: AppBar(title: Text('Details $id')),
         body: Center(
           child: ElevatedButton(
             onPressed: () {
               QuickRouter.of(context).pop();
             },
             child: Text('Go Back'),
           ),
         ),
       );
     }
   }
   

2. 中间件

   quick_router 支持路由中间件，你可以在跳转前执行一些逻辑，例如检查用户是否登录。

   final routes = {
     '/': (context) => HomePage(),
     '/details': (context) => DetailsPage(),
   };
   
   final middleware = [
     (context, route) {
       if (route == '/details') {
         // 检查用户是否登录
         if (!isLoggedIn) {
           QuickRouter.of(context).push('/login');
           return false; // 阻止跳转
         }
       }
       return true; // 允许跳转
     }
   ];
   
   onGenerateRoute: QuickRouter.generateRoute(routes, middleware: middleware),