Flutter路由注解插件router_annotation的使用

Flutter路由注解插件router_annotation的使用

router_annotation 插件定义了由 router_compiler 使用的注解，以生成用于 Flutter 路由的代码。

使用

要了解如何配置您的包，请参阅 示例。

完整示例Demo

下面是一个完整的示例，展示了如何使用 router_annotation 和 router_compiler 插件来管理 Flutter 应用中的路由。

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  router_annotation: ^0.2.0 # 确保使用最新版本
  router_compiler: ^0.2.0 # 确保使用最新版本

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

2. 创建路由注解

在项目中创建一个文件 routes.dart，并定义路由注解：

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

part 'routes.g.dart'; // 自动生成的代码

// 使用 @Route 注解定义路由
@RoutePage()
class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页')),
      body: Center(child: Text('欢迎来到首页！')),
    );
  }
}

@RoutePage()
class AboutPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('关于')),
      body: Center(child: Text('这是关于页面。')),
    );
  }
}

3. 生成路由代码

接下来，需要运行 router_compiler 来生成路由代码。可以在命令行中执行以下命令：

flutter packages pub run router_compiler

这将生成一个 routes.g.dart 文件，该文件包含了自动生成的路由代码。

4. 配置路由

在应用的入口文件（如 main.dart）中配置路由：

import 'package:flutter/material.dart';
import 'package:your_project/routes.dart'; // 导入生成的路由代码
import 'package:router_annotation/router_annotation.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

5. 导航到指定页面

现在可以使用生成的路由进行导航：

import 'package:flutter/material.dart';
import 'package:your_project/routes.dart'; // 导入生成的路由代码

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateInitialRoutes: (String initialRouteName) {
        if (initialRouteName == '/') {
          return [router.generateRoute(RouteSettings(name: '/'))];
        }
        return [];
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到关于页面
            router.push(AboutPageRoute());
          },
          child: Text('前往关于页面'),
        ),
      ),
    );
  }
}