Flutter 的路由2.0把我搞蒙了

简介: Flutter 路由2.0做了较大改动,引入很多中间类来分离路由的各自职责,目的更多的是为了 Web 端的复杂路由应用。1.0版本的路由可以继续用,但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的路由是个啥?

还好咱有路子,进去看了一下,有点懵逼,这路由怎么多了那么多东西,一时半会闹不明白。
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这个自定义的类,来个时序图看一下。

image.png

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


欢迎关注个人公众号:岛上码农

相关文章
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
128 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。 我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。 我写了个 demo 今天我们就一起来看下这两个方法如何使用。
1539 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
|
5天前
|
Go 网络架构 开发者
Flutter &鸿蒙next中的路由使用详解【基础使用】
本文介绍了 Flutter 路由系统的使用方法,包括基本路由、命名路由、参数传递、返回参数和动态路由。通过 `Navigator` 类实现页面跳转,支持简单和复杂参数的传递,并可通过 `onGenerateRoute` 实现更灵活的动态路由管理。示例代码展示了如何在实际项目中应用这些技术,帮助开发者构建清晰、易于维护的导航结构。
60 1
|
23天前
|
UED 开发者
flutter:获取对象&路由管理 (四)
本文介绍了Flutter中如何通过Context获取状态对象、使用GlobalKey获取状态对象、基本的路由管理、路由传值、命名路由、返回根路由以及点击图标跳转的方法。示例代码展示了如何在应用中实现这些功能,包括页面跳转、传递参数和返回上一页等操作。
|
6月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
771 0
|
4月前
|
Android开发
Flutter路由跳转参数处理小技巧
Flutter路由跳转参数处理小技巧
41 0
|
6月前
|
前端开发 开发者 iOS开发
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
【4月更文挑战第30天】本文介绍了Flutter的路由管理与页面跳转,包括基本和命名路由管理。基本路由使用`Navigator`的`push`和`pop`方法,如`MaterialPageRoute`和`CupertinoPageRoute`。命名路由则通过路由表注册名称进行跳转,如`Navigator.pushNamed`。此外,还展示了如何通过构造函数、`arguments`和`PageRouteBuilder`进行路由传值。掌握这些知识能提升Flutter开发效率。
106 0
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
|
6月前
|
BI
Flutter笔记:路由观察者
Flutter笔记:路由观察者
273 0
|
6月前
|
UED
Flutter之自定义路由切换动画
Flutter之自定义路由切换动画 在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等。默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要自定义一些特殊的动画效果来提高用户体验。本文将介绍如何在Flutter中实现自定义的路由切换动画。
209 0
|
6月前
|
API
Flutter状态管理终极方案GetX第一篇——路由
Flutter状态管理终极方案GetX第一篇——路由 GetX是Flutter中一个非常流行的状态管理库,它不仅提供了简单易用的状态管理功能,还可以帮助我们方便地管理路由。在这篇文章中,我们将介绍如何使用GetX来实现路由管理。
339 0