Flutter路由管理插件simple_router的使用

simple_router 是一个轻量级的 Flutter 路由管理插件，它简化了路由管理的复杂性，使得开发者可以更专注于业务逻辑。simple_router 提供了简单易用的 API 来管理页面之间的跳转和参数传递。

安装

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

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

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

基本用法

1. 初始化路由

在你的 main.dart 文件中，初始化 SimpleRouter 并定义路由：

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

void main() {
  SimpleRouter.configure(
    routes: {
      '/': (context, args) => HomePage(),
      '/details': (context, args) => DetailsPage(args: args),
    },
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: SimpleRouter.onGenerateRoute,
      initialRoute: '/',
    );
  }
}

2. 页面跳转

使用 SimpleRouter 进行页面跳转：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跳转到详情页并传递参数
            SimpleRouter.push(context, '/details', args: {'id': 123});
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

3. 接收参数

在目标页面中接收传递的参数：

class DetailsPage extends StatelessWidget {
  final Map<String, dynamic> args;

  DetailsPage({required this.args});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Page'),
      ),
      body: Center(
        child: Text('Details ID: ${args['id']}'),
      ),
    );
  }
}

4. 返回上一页

使用 SimpleRouter.pop 返回上一页：

class DetailsPage extends StatelessWidget {
  final Map<String, dynamic> args;

  DetailsPage({required this.args});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Details ID: ${args['id']}'),
            ElevatedButton(
              onPressed: () {
                // 返回上一页
                SimpleRouter.pop(context);
              },
              child: Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}

高级用法

1. 嵌套路由

simple_router 支持嵌套路由，你可以在一个页面中定义子路由：

SimpleRouter.configure(
  routes: {
    '/': (context, args) => HomePage(),
    '/details': (context, args) => DetailsPage(args: args),
  },
  nestedRoutes: {
    '/details': {
      '/sub': (context, args) => SubDetailsPage(args: args),
    },
  },
);

2. 路由拦截

你可以在路由跳转之前进行拦截，例如检查用户是否登录：

SimpleRouter.configure(
  routes: {
    '/': (context, args) => HomePage(),
    '/details': (context, args) => DetailsPage(args: args),
  },
  onBeforePush: (context, route, args) async {
    // 检查用户是否登录
    bool isLoggedIn = await checkLoginStatus();
    if (!isLoggedIn) {
      SimpleRouter.push(context, '/login');
      return false; // 阻止当前路由跳转
    }
    return true; // 允许路由跳转
  },
);