Flutter路由注解插件yyy_route_annotation的使用

Flutter路由注解插件yyy_route_annotation的使用

yyy_route_annotation 插件提供了一个通过注解快速生成路由映射的功能。当你收到通知或深度链接时，可以使用URL跳转到相应的页面。

使用

添加依赖包到dependencies

在项目的pubspec.yaml文件中添加依赖包：

environment:
  sdk: '>=2.12.0 <3.0.0'
dependencies:
  yyy_route_annotation: ^0.0.2
dev_dependencies:
  build_runner: ^2.0.0

下载依赖包：

flutter packages get

添加注解

首先导入yyy_route_annotation库：

import 'package:yyy_route_annotation/route_serializable.dart';

然后使用注解来标记页面和主函数：

// 标记一个页面
[@RoutePage](/user/RoutePage)()
class TestPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container();
  }
}

// 标记主函数
[@RouteMain](/user/RouteMain)()
void main() {
  runApp(MyApp());
}

运行构建命令生成路由映射：

flutter packages pub run build_runner build

配置MaterialApp

在你的MaterialApp配置中，使用生成的路由映射：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: allRoutes, // 使用生成的路由映射
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

跳转页面

使用RouteManager来根据URL跳转页面：

RouteManager.push(context, "yyy://page/one_page?param_one=xx&two=xx");

URL参数使用下划线（_），而Dart类参数使用驼峰命名法（CamelCase）。

完整示例代码

以下是一个完整的示例代码，展示了如何使用yyy_route_annotation插件来管理路由：

import 'package:flutter/material.dart';
import 'package:yyy_route_annotation/yyy_route_annotation.dart';
import 'main.all.dart';

// 标记一个页面
[@RoutePage](/user/RoutePage)()
class TestPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(); // 页面内容可以根据需要修改
  }
}

// 标记主函数
[@RouteMain](/user/RouteMain)()
void main() {
  runApp(Home());
}

// 主应用
class Home extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "RouteTest",
      routes: allRoutes, // 使用生成的路由映射
    );
  }
}

更多关于Flutter路由注解插件yyy_route_annotation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter路由注解插件yyy_route_annotation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


yyy_route_annotation 是一个用于 Flutter 的路由注解插件，它可以帮助开发者通过注解的方式简化路由的配置和管理。以下是如何使用 yyy_route_annotation 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 yyy_route_annotation 和 yyy_route_generator 的依赖。

dependencies:
  flutter:
    sdk: flutter
  yyy_route_annotation: ^1.0.0

dev_dependencies:
  build_runner: ^2.1.0
  yyy_route_generator: ^1.0.0

2. 创建路由页面

在 Flutter 中创建页面时，使用 @YyyRoute 注解来标记该页面。

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

@YyyRoute("/home")
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Welcome to the Home Page!'),
      ),
    );
  }
}

@YyyRoute("/profile")
class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Page'),
      ),
      body: Center(
        child: Text('This is your Profile Page!'),
      ),
    );
  }
}

3. 生成路由代码

使用 build_runner 生成路由代码。在终端中运行以下命令：

flutter pub run build_runner build

这将生成一个包含路由配置的 .g.dart 文件。

4. 配置路由

在 main.dart 文件中，使用生成的路由配置来设置 MaterialApp 的路由。

import 'package:flutter/material.dart';
import 'package:yyy_route_generator/yyy_route_generator.dart';
import 'router.gr.dart'; // 生成的路由文件

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

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

5. 导航到路由页面

你可以使用 Navigator.pushNamed 或 Navigator.pushNamed 来导航到指定的路由页面。

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

6. 处理参数传递

如果你的路由页面需要传递参数，可以在路由注解中指定参数类型，并在页面中接收参数。

@YyyRoute("/details")
class DetailsPage extends StatelessWidget {
  final String id;

  DetailsPage({required this.id});

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

在导航时传递参数：

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