Flutter路由注解插件eazy_router_annotation的使用

eazy_router_annotation 是 EazyRouter 包的一部分。它主要用于通过注解的方式简化 Flutter 应用中的路由管理。本文将展示如何使用 eazy_router_annotation 插件来实现一个简单的路由导航功能。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 eazy_router 和 eazy_router_annotation 依赖：

dependencies:
  eazy_router: ^版本号
  eazy_router_annotation: ^版本号

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

2. 创建页面类并添加注解

接下来，创建需要导航到的页面，并为每个页面添加路由注解。

// 首页
import 'package:eazy_router_annotation/eazy_router_annotation.dart';

[@RoutePage](/user/RoutePage)('/home')
class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pushNamed(context, '/about'),
          child: Text('跳转到关于页面'),
        ),
      ),
    );
  }
}

// 关于页面
[@RoutePage](/user/RoutePage)('/about')
class AboutPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('关于')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: Text('返回首页'),
        ),
      ),
    );
  }
}

3. 初始化路由表

在应用程序的入口文件中初始化路由表，并使用 MaterialApp.router 启动应用。

import 'package:flutter/material.dart';
import 'package:eazy_router/eazy_router.dart';
import './routes/home_page.dart';
import './routes/about_page.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化路由表
    final router = EazyRouter(
      routes: [
        RouteConfig(route: '/home', page: HomePage.new),
        RouteConfig(route: '/about', page: AboutPage.new),
      ],
    );

    return MaterialApp.router(
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
      debugShowCheckedModeBanner: false,
    );
  }
}

4. 运行应用

完成以上步骤后，运行应用即可看到效果：

1. 点击“跳转到关于页面”按钮，会从首页跳转到关于页面。
2. 点击“返回首页”按钮，会返回到首页。

完整示例代码

以下是完整的示例代码：

// 首页
import 'package:eazy_router_annotation/eazy_router_annotation.dart';

[@RoutePage](/user/RoutePage)('/home')
class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pushNamed(context, '/about'),
          child: Text('跳转到关于页面'),
        ),
      ),
    );
  }
}

// 关于页面
[@RoutePage](/user/RoutePage)('/about')
class AboutPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('关于')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: Text('返回首页'),
        ),
      ),
    );
  }
}

// 主应用
import 'package:flutter/material.dart';
import 'package:eazy_router/eazy_router.dart';
import './routes/home_page.dart';
import './routes/about_page.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化路由表
    final router = EazyRouter(
      routes: [
        RouteConfig(route: '/home', page: HomePage.new),
        RouteConfig(route: '/about', page: AboutPage.new),
      ],
    );

    return MaterialApp.router(
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
      debugShowCheckedModeBanner: false,
    );
  }
}