最近改造项目，感觉Flutter路由这块需要打磨打磨，想起来之前好像听说过通过注解来生成路由映射的工具裤，嗯，很快就搜索到阿里写的annotation_route，先start一下，看了下issue，没有对页面分散到各个模块的情况进行处理，看了下issue时间，貌似没有改进的计划，放弃。
只能自己挖井(挖坑)了，不久之前刚学会用Dart Pub Global 创建命令行应用程序。
感觉这个注解应该跟官方的json_annotation很相似，于是立刻下载下来，看源码。
在看源码的过程中，低调大佬做了个ok_route，以及掘金一个小伙伴做了route_generator_repo，都是通过注释，来生成路由映射的解决方案，因为最后呈现方式跟自己构思的有所不同，所以还是决定继续看源码，哈哈哈，感兴趣的同学可以去看看，找到合适自己的路由注解。
看到源码，首先映入眼帘的是
dependencies:
analyzer: any
analyzer主要负责将dart代码转换成为ast(abstract syntax tree)，具体是什么意思，我随便一搜索，又是大厂的文章
Flutter动态化，看完感觉如果官方能支持dart代码=》AST=》dart代码的话，你们心心念念的热修复应该就能成了。
之后我又看了下
dependencies:
build_runner_core: any
build_runner: any
在build_runner_core的main.dart,我看到PackageGraph如何对Package的解析。从build_runner中看到了builder执行的过程，本来想另开一篇水一下的，后面看到暴打小女孩已经写过了Flutter 注解处理及代码生成,感兴趣的小伙伴可以自己去看一下。
现在知道了怎么解析项目结构以及引用的模块，知道怎么解析一个dart代码，写法法路由就顺利多了，下面直接上使用手册。
描述
通过注解快速完成路由映射.
- ff_annotation_route
- 描述
- 使用
- 增加引用
- 添加注解
- 空构造
- 带参数构造
- FFRoute
- 生成文件
- 环境
- 激活
- 执行命令
- 命令参数
- Main.dart
- Push
- Push name
- Push name with arguments
使用
增加引用
添加引用到dev_dependencies，及你需要注解的project/packages到pubspec.yaml中
dev_dependencies:
ff_annotation_route: latest-version
执行 flutter packages get 下载
添加注解
空构造
import 'package:ff_annotation_route/ff_annotation_route.dart';
@FFRoute(
name: "fluttercandies://mainpage",
routeName: "MainPage",
)
class MainPage extends StatelessWidget
{
// ...
}
带参数构造
import 'package:ff_annotation_route/ff_annotation_route.dart';
@FFRoute(
name: "fluttercandies://picswiper",
routeName: "PicSwiper",
argumentNames: ["index", "pics"],
showStatusBar: false,
pageRouteType: PageRouteType.transparent,
)
class PicSwiper extends StatefulWidget {
final int index;
final List pics;
PicSwiper({this.index, this.pics});
// ...
}
FFRoute
| Parameter | Description | Default |
|---|---|---|
| name | 路由的名字 (e.g., "/settings"). | required |
| argumentNames | 路由的参数的名字 (只能使用") | - |
| showStatusBar | 是否显示状态栏 | true |
| routeName | 用于埋点收集数据的页面名字 | '' |
| pageRouteType | 路由的类型 (material, cupertino, transparent) | - |
| description | 路由的描述 | '' |
| exts | 其他扩展参数. | - |
生成文件
环境
添加dart的bin的路径到你的系统 $PATH.
cache\dart-sdk\bin
更多信息
不清楚的可以看掘金
激活
pub global activate ff_annotation_route
执行命令
到你的项目根目录下面执行.
ff_route
命令参数
可用的命令:
| command name | description |
|---|---|
| -h, --help | 打印帮助信息. |
| -p, --path [arguments] | 执行命令的目录，没有就是当前目录. |
| -rc, --route-constants | 是否在根项目中的 xxx_route.dart 生成全部路由的静态常量 |
| -rh, --route-helper | 生成 xxx_route_helper.dart 来帮助你处理路由 |
| -rn, --route-names | 是否在根项目中的 xxx_route.dart 生成全部路由的名字 |
| -s, --save | 是否保存命令到本地，如果保存了，下一次就只需要执行ff_route就可以了 |
| -na, --no-arguments | FFRouteSettings 将没有 arguments 这个参数,这个是主要是为了适配 Flutter 低版本 |
| -g, --git package1,package2 | 是否扫描 git 引用的 package，你需要指定 package 的名字 |
| --package | 这个是否是一个 package |
| --no-is-initial-route | FFRouteSettings 将没有 isInitialRoute 这个参数,这个是主要是为了适配 Flutter 高版本 |
| -o --output | route和helper文件的输出目录路径，路径相对于主项目的lib文件夹 |
| -rfo --routes-file-output | routes 文件的输出目录路径，路径相对于主项目的lib文件夹 |
Main.dart
如果运行的命令带有参数
--route-helper,FFNavigatorObserver/FFRouteSettings
将会生成在xxx_route_helper.dart中，用于协助追踪页面和设置状态栏。如果运行的命令带有参数
--route-helper，FFTransparentPageRoute将会生成在
xxx_route_helper.dart中，可以使用它来push一个透明的PageRoute。
Widget build(BuildContext context) {
return OKToast(
child: MaterialApp(
title: 'ff_annotation_route demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
navigatorObservers: [
FFNavigatorObserver(routeChange:
(RouteSettings newRouteSettings, RouteSettings oldRouteSettings) {
//you can track page here
print(
"route change: ${oldRouteSettings?.name} => ${newRouteSettings?.name}");
if (newRouteSettings is FFRouteSettings &&
oldRouteSettings is FFRouteSettings) {
if (newRouteSettings?.showStatusBar !=
oldRouteSettings?.showStatusBar) {
if (newRouteSettings?.showStatusBar == true) {
SystemChrome.setEnabledSystemUIOverlays(
SystemUiOverlay.values);
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.dark);
} else {
SystemChrome.setEnabledSystemUIOverlays([]);
}
}
}
})
],
builder: (c, w) {
ScreenUtil.instance =
ScreenUtil(width: 750, height: 1334, allowFontScaling: true)
..init(c);
var data = MediaQuery.of(c);
return MediaQuery(
data: data.copyWith(textScaleFactor: 1.0),
child: w,
);
},
initialRoute: Routes.FLUTTERCANDIES_MAINPAGE,// fluttercandies://mainpage
onGenerateRoute: (RouteSettings settings) =>
onGenerateRouteHelper(settings, notFoundFallback: NoRoute()),
),
);
}
更多信息
Push
Push name
Navigator.pushNamed(context, Routes.FLUTTERCANDIES_MAINPAGE /* fluttercandies://mainpage */);
Push name with arguments
参数必须是一个 Map
Navigator.pushNamed(
context,
Routes.FLUTTERCANDIES_PICSWIPER, // fluttercandies://picswiper
arguments: {
"index": index,
"pics": listSourceRepository
.map((f) => PicSwiperItem(f.imageUrl, des: f.title))
.toList(),
},
);
结语
不同于其他的路由注解方案，我加入了对埋点，全屏模式以及路由类型的处理。路由注解方案很多，找到一个合适自己的就好了，欢迎提问题。
最后放上 ff_annotation_route，欢迎加入Flutter Candies，一起生产可爱的Flutter 小糖果(QQ群:181398081)
最最后放上Flutter Candies全家桶，真香。