Flutter路由管理插件baserouter的使用

BaseRouter 是一个基于 Flutter 的路由管理插件，旨在简化路由的配置和跳转。它提供了一种声明式的方式来定义路由，并支持路由拦截、参数传递、嵌套路由等功能。下面是一个简单的使用指南，帮助你快速上手 BaseRouter。

1. 添加依赖

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

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

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

2. 定义路由

接下来，你需要在项目中定义路由。你可以通过继承 BaseRouter 类来创建自定义的路由管理器。

import 'package:flutter/material.dart';
import 'package:baserouter/baserouter.dart';

class MyAppRouter extends BaseRouter {
  MyAppRouter() : super();

  [@override](/user/override)
  Map<String, WidgetBuilder> get routes => {
        '/': (context) => HomePage(),
        '/details': (context) => DetailsPage(),
        '/settings': (context) => SettingsPage(),
      };
}

在这个例子中，我们定义了一个 MyAppRouter 类，并重写了 routes 方法，返回一个包含路由路径和对应页面的 Map。

3. 使用路由

在你的 main.dart 文件中，使用 MaterialApp 或 CupertinoApp 来初始化路由管理器。

import 'package:flutter/material.dart';
import 'my_app_router.dart';

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

class MyApp extends StatelessWidget {
  final MyAppRouter _router = MyAppRouter();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: _router.generator,
      initialRoute: '/',
    );
  }
}

在这里，onGenerateRoute 属性被设置为 _router.generator，这样 Flutter 就会使用 BaseRouter 来管理路由。

4. 路由跳转

你可以使用 Navigator.pushNamed 或 BaseRouter 提供的方法来进行路由跳转。

Navigator.pushNamed(context, '/details');

如果你需要传递参数，可以使用 arguments 参数：

Navigator.pushNamed(context, '/details', arguments: {'id': 123});

在目标页面中，你可以通过 ModalRoute.of(context).settings.arguments 来获取传递的参数。

class DetailsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final Map<String, dynamic> args = ModalRoute.of(context).settings.arguments;
    final int id = args['id'];

    return Scaffold(
      appBar: AppBar(
        title: Text('Details Page'),
      ),
      body: Center(
        child: Text('Details for item $id'),
      ),
    );
  }
}

5. 路由拦截

BaseRouter 还支持路由拦截功能。你可以通过重写 onBeforeRoute 方法来实现自定义的路由拦截逻辑。

class MyAppRouter extends BaseRouter {
  MyAppRouter() : super();

  [@override](/user/override)
  Map<String, WidgetBuilder> get routes => {
        '/': (context) => HomePage(),
        '/details': (context) => DetailsPage(),
        '/settings': (context) => SettingsPage(),
      };

  [@override](/user/override)
  FutureOr<bool> onBeforeRoute(String routeName, BuildContext context) async {
    if (routeName == '/settings') {
      // 检查用户是否登录
      bool isLoggedIn = await checkIfUserIsLoggedIn();
      if (!isLoggedIn) {
        Navigator.pushNamed(context, '/login');
        return false; // 阻止路由跳转
      }
    }
    return true; // 允许路由跳转
  }

  Future<bool> checkIfUserIsLoggedIn() async {
    // 模拟检查用户登录状态
    await Future.delayed(Duration(seconds: 1));
    return false;
  }
}

在这个例子中，当用户尝试访问 /settings 页面时，会先检查用户是否已登录。如果未登录，则跳转到登录页面，并阻止原始路由的跳转。

6. 嵌套路由

BaseRouter 还支持嵌套路由，你可以在一个页面中定义子路由。

class MyAppRouter extends BaseRouter {
  MyAppRouter() : super();

  [@override](/user/override)
  Map<String, WidgetBuilder> get routes => {
        '/': (context) => HomePage(),
        '/details': (context) => DetailsPage(),
        '/settings': (context) => SettingsPage(),
        '/profile': (context) => ProfilePage(),
      };

  [@override](/user/override)
  Map<String, WidgetBuilder> get nestedRoutes => {
        '/profile': {
          '/edit': (context) => EditProfilePage(),
          '/security': (context) => SecurityPage(),
        },
      };
}

在这个例子中，/profile 页面有两个子路由：/edit 和 /security。你可以在 ProfilePage 中使用 Navigator.pushNamed 来跳转到这些子路由。

7. 路由监听

BaseRouter 还提供了路由监听功能，你可以在路由发生变化时执行一些操作。

class MyAppRouter extends BaseRouter {
  MyAppRouter() : super();

  [@override](/user/override)
  Map<String, WidgetBuilder> get routes => {
        '/': (context) => HomePage(),
        '/details': (context) => DetailsPage(),
        '/settings': (context) => SettingsPage(),
      };

  [@override](/user/override)
  void onRouteChanged(String routeName, BuildContext context) {
    print('Route changed to: $routeName');
  }
}