Flutter 2.0的路由把我搞懵了

前言

前面几篇介绍了 Flutter 的路由,包括使用自带的 Navigator 和使用 fluro 路由插件,实际上两种方式都能满足日常开发的使用。但是,如果你上 Flutter 的官网,就会发现关于路由,有这么一段内容:

To learn about Flutter’s original (1.0) navigation and routing mechanism, see the Navigation recipes in the Flutter cookbook and the Navigator API docs. The original navigation model uses an imperative approach.
To learn about Flutter’s updated (2.0) navigation and routing mechanism, which uses a declarative approach, see Learning Flutter’s new navigation and routing system.
Note that this new mechanism isn’t a breaking change—you can continue to use the original approach if that serves you well. If you want to implement deep linking, or take advantage of multiple navigators, check out the 2.0 version.

意思是你使用1.0的路由也没什么问题,不会受版本升级影响,但是如果想实现深度的链接(应该是指多层级),或者多导航器的特性,那么就可以考虑2.0版本的路由。

Flutter 2.0的路由是个啥?

Flutter 2.0的路由相比1.0来说多了很多东西,一时半会闹不明白。


image.png

总的来说,为了实现高大上的路由,多了下面这些东西:

  • Page:用于设置导航器(Navigator)历史堆栈的不可变对象(听着不像人话,原谅我的翻译水平有限)。
  • Router:配置导航器要显示的页面列表。通常页面的改变是基于底层平台(具体底层平台的什么没有说),或App 的状态发生了改变。
  • RouteInformationParser:从路由信息提供者(RouteInformationProvider,看到 Provider 应该是遵循某个协议的对象)获取路由信息并将信息解析转换为用户定义的数据类型(猜想应该是处理路由参数类的东西吧)。
  • RouterDelegate:定义路由如何获知 App 状态改变的行为,以及如何响应这些行为。它的职责就是监听 RouteInformationParser 和 App 状态,然后构建当前页面列表(Pages)的导航器。看到 Delegate 猜想这个应该是具体的路由委托管理的,这个应该是路由主要行为的实现者。
  • BackButtonDispatcher:向路由通知返回按钮点击事件。

看上面的描述完全不知道具体怎么回事,感觉搞得太复杂了,让人望而生畏啊!


image.png

具体机制

还好,配了张图,关系总算能够理得顺了。


image.png

举个例子:


image.png
  1. 假设需要导向新的路由,例如 books/2RouteInformationParser 会将其转换为一个应用中定义的抽象的数据类型 T,例如一个名叫 BooksRoutePath 的类。
  2. RouterDelegate 会调用其 setNewRoutePath 方法,并将这个类作为它的参数,并且必须更新应用的状态以便反映这些变化(例如设置 selectedBooKId)并且调用 notifyListeners
  3. notifyListeners 被调用后,它会通知 Router 重建 RouterDelegate(通过调用其build方法)。
  4. RouterDelegate.builder()返回一个新的导航器,导航器的页面反映了 app 状态的变化(例如 selectedBookId)。

感觉还是有点费解,而且还引入了BooksRoutePath这个自定义的类,来个时序图看一下。

2.0路由时序图

有了这张图会更清晰一些,其实和之前1.0的路由有点相似,都是解析路由,然后找到匹配页面再显示。只是这套机制更为复杂,实际需要通过代码才能了解具体实现方式,下一篇再上demo。

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

推荐阅读更多精彩内容