Flutter 路由——页面表及页面参数绑定的自动生成

Flutter 自带完善的路由框架,可以直接用Navigator.of(context).push(route)打开新页面或者用命名的方式:Navigator.of(context).pushNamed($pageName);,然后在MaterialApp#onGenerateRoute中写若干个switch-case根据页面名称进行分发。如此操作虽然可行,但是在页面数量较多时,还是略微繁琐。

有时候页面需要外部传参——依赖注入,常规的方法是:

  1. 在页面Widget上添加变量
  2. 构造函数传入
  3. 在State中widget.something引用
  4. 同时在onGenerateRoute中创建widget中调用对应的构造函数。

此方法稍显繁琐,并且在页面依赖变化时,又要重复这4个步骤。
如果能通过简单的配置生成代码,并且直接使用,可以简化源码,节省时间并且避免出错。我先是在网上搜索相关的解决方案,但是没找到。因此自己动手造了这个轮子——router_generator
pub, github.

使用

安装

dev_dependencies:
  router_generator: 0.1.1
  build_runner:

引用

import 'package:router_generator/router_generator.dart';

页面标记

@Router('third')
class ThirdPage extends StatefulWidget {

在页面Widget上使用Router注解,页面名作为参数

参数标记

@inject
class ThirdPageState extends State<ThirdPage> {
  @RouterParam(required: true)
  Person person;
  @RouterParam(key: 'set_key')
  bool setKey = false;
  @routerParam
  Map<String, int> map;

给需要注入依赖的State添加inject注解,并且在变量上添加RouterParam 注解
RouterParam有两个可选的参数:

  • key: 此参数在参数表中的键,默认用变量名
  • required:是否必须,如果是的话,在依赖注入时,如果参数表中没有此参数,debug模式下会报错,并且在生成的createRouteArgs方法中此参数为必须。

如果两个参数都不需要,建议用routerParam注解。
从例子中可以看到,dart的各种类型包括自定义的model都是支持的

代码生成

执行命令:flutter packages pub run build_runner build, 更多使用方法可参考 build_runner

生成的若干dart文件中包含:

  • 页面路由表 main.router_table.dart
  • 页面依赖注入 $page.inject.dart 若干个,其中 page 是你 state所在 文件的名称,例如 foo.dart对应foo.inject.dart

引用

路由生成

MaterialApp(
  ...
  onGenerateRoute: (RouteSettings settings) {
    String pageName = settings.name;
    var arguments = settings.arguments;
    if (arguments is Map<String, dynamic>) {
      deliverParams(pageName, arguments);
    }
    return MaterialPageRoute(builder: (_) {
      return getWidgetByPageName(pageName);
    });
  },
);

修改onGenerateRoute方法,调用main.router_table.dart中的getWidgetByPageName,获取对应的页面Widget,并且deliverParams()传递参数。

对于嵌入原有原生的App,可参考:

onGenerateRoute: (RouteSettings settings) {
    String route = settings.name;
    Uri uri = Uri.parse(route);
    var pageName = uri.path.replaceFirst(RegExp('/'), '');
    lastRouteParams = uri.queryParameters;
    return PageRouteBuilder(pageBuilder: (BuildContext context,
        Animation<double> animation, Animation<double> secondaryAnimation) {
      return getWidgetByPageName(pageName);
    });
  },

Map<String, String>类型的参数表(即uri中值为字符串的参数表)也是支持的,不需要额外转换。

依赖注入

在已注入依赖的state中import 对应的inject文件,在使用变量前注入依赖,如:

@override
void initState() {
    super.initState();
    injectDependencies(this);
    doSometing();
}

传递依赖


Navigator.of(context).pushNamed('second',
                    arguments: {'name': 'bar', 'count': 666});
                    

可以手动创建依赖的参数表,但建议使用 inject 文件中的 createRouteArgs方法。

Navigator.of(context).pushNamed('second',
                    arguments: createRouteArgs(name: 'bar', count: 666));

总结

如此,就完成了页面表及页面参数绑定的自动生成,增减页面和注入参数变得如此简单。有问题的同学欢迎留言或者提issue,github点个赞🤓

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容