Flutter路由管理插件flutter_router的使用

Flutter路由管理插件flutter_router的使用

简介

flutter_router 是一个为Flutter应用提供灵活路由管理的库，支持参数传递和清晰的路由定义。通过这个插件，你可以更方便地管理和导航应用中的页面。

安装

要在你的项目中使用 flutter_router，你需要在 pubspec.yaml 文件中添加它作为依赖项：

dependencies:
  flutter_router: ^最新版本号

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

使用示例

1. 导入包

首先，你需要导入 flutter_router 包：

import 'package:flutter_router/flutter_router.dart' as FRouter;

2. 配置路由

接下来，在 main.dart 文件中配置路由。你可以使用 FRouter.Router 来定义路由规则，并将其传递给 MaterialApp 的 onGenerateRoute 属性。

void main() => runApp(MaterialApp(
  onGenerateRoute: FRouter.Router({
    '/accounts/{id}': (context, match, settings) => Account(match!.parameters['id']!),
    '/': (context, match, settings) => Index(),
  }).get,
));

在这个例子中：

• '/accounts/{id}' 是一个带有参数的路由路径，其中 {id} 是一个动态参数。
• match.parameters['id'] 用于获取路由参数 id。
• Index() 是应用的主页，对应根路径 '/'。

3. 创建页面组件

接下来，创建两个页面组件：Account 和 Index。

class Account extends StatelessWidget {
  final String id;

  Account(this.id);

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

class Index extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to the Home Page!'),
            ElevatedButton(
              onPressed: () {
                // 跳转到带有参数的路由
                Navigator.pushNamed(context, '/accounts/123');
              },
              child: Text('Go to Account Page'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

• Account 页面会显示传入的 id 参数。
• Index 页面包含一个按钮，点击后会跳转到 /accounts/123 路由，并传递 123 作为 id 参数。

完整示例代码

以下是完整的 main.dart 文件代码，包含了所有必要的部分：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_router/flutter_router.dart' as FRouter;

void main() => runApp(MaterialApp(
  onGenerateRoute: FRouter.Router({
    '/accounts/{id}': (context, match, settings) => Account(match!.parameters['id']!),
    '/': (context, match, settings) => Index(),
  }).get,
));

class Account extends StatelessWidget {
  final String id;

  Account(this.id);

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

class Index extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to the Home Page!'),
            ElevatedButton(
              onPressed: () {
                // 跳转到带有参数的路由
                Navigator.pushNamed(context, '/accounts/123');
              },
              child: Text('Go to Account Page'),
            ),
          ],
        ),
      ),
    );
  }
}