在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做扩展。