annotation_route 的应用

最新推荐文章于 2025-12-30 02:01:28 发布

原创最新推荐文章于 2025-12-30 02:01:28 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#日常笔记

flutter 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用annotation_route包简化Flutter中的动态路由管理，通过注解实现路由映射，避免大量页面导入，提供一种配置化且低耦合的解决方案。

在flutter中，动态路由显得特别碎片化不易于管理，而且在页面中如果需要跳转到另外个页面的话，就需要把需要的页面引入进来，如果需要跳100个页面，就需要引100个进来，这样无疑显得太过庞大了。因此这里需要一个类似于配置化的结构并且又要缩小耦合性。

这里用到了annotation_route，这是闲鱼推出的一个以注解法实现flutter路由映射的包，详情演变过程看这里Flutter路由管理代码这么长长长长长，阿里工程师怎么高效解决？

本文记录记录在使用过程中踩过得一些坑。

首先在 pubspec.yaml 中引入annotation_route

需要跳转的页面引入annotation_route，并且在最前面定义@ARoute

然后在lib下新建一个router文件夹，内部建立一个管理路由的入口文件，名字可以随便取，这里叫route.dart。并写入如下代码

import 'package:annotation_route/route.dart';
import './route.internal.dart';
import 'package:flutter/material.dart';
@ARouteRoot()
class MyRouteOption {
  String urlpattern;
  Map<String, dynamic> query;
  MyRouteOption(this.urlpattern, this.query );
}
class AppRoute {
  static Widget getPage(String urlString, Map<String, dynamic> query) {
      ARouterInternalImpl internal = ARouterInternalImpl();
      ARouterResult routeResult = internal.findPage(ARouteOption(urlString, query), MyRouteOption(urlString, query));
      if(routeResult.state == ARouterResultState.FOUND) {
        return routeResult.widget;
      }
      return Scaffold(   // 这里只是例子，返回的是未匹配路径的控件
        appBar: AppBar(),
        body: Center(
          child: Text('NOT FOUND'),
        ),
      );
  }
}

现在写进去还会报错，因为还没找到route.internal.dart文件。

接下来运行

flutter packages pub run build_runner build --delete-conflicting-outputs

如果需要清除之前的文件可以运行

flutter packages pub run build_runner clean

如果之前没有引入build_runner的话这会报错，只需要在dev_dependencies中引入即可。

接下来它就会自动去找标了@ARoute注解的文件，然后在route.dart的同级目录下生成route.internal.dart。这个文件下已经定义好路径跳转的页面。

接下来就可以使用了，这里从main.dart跳转到newPage.dart页面。

由于是动态路由，现在newPage.dart中写入传进来的参数。

现在在main.dart引入route.dart并用AppRoute.getPage方法

getPage方法第一个参数就是之前定义的路径，第二个是传递的Map类型的参数。

在newPage.dart中接收参数，代码如下

import 'package:flutter/material.dart';
import 'package:annotation_route/route.dart';

@ARoute(url: 'page://newPage')
class NewPage extends StatelessWidget {
  NewPage(this.option); // 定义传入进来的参数
  // option是route.dart中定义的MyRouteOption类，从query获取传递的数据
  dynamic option;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text(option.query[ 'test' ]),
      ),
    );
  }
}

option.query中即可获取之前传递的参数。

这是annotation_route的基本用法，另外还提供别名等其他用法，由于没有用到就没有涉及。从上面的例子可以看到annotation_route只提供了一个类似于ImageProvider寻找资源这种用法，而不是局限于页面路由，因此也可以用来数据路由等。因此我在前面加上了"page://"，因此根据自己的需要可以在route.dart中AppRoute做扩展。