Flutter 导航系列 ---- Navigator 2.0

312 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第10天,点击查看活动详情

Navigator 2.0

Navigator 2.0 API 向框架添加了新类,以使应用程序的屏幕成为应用程序状态的函数,并提供解析来自底层平台的路由(如 Web URL)的能力。以下是新功能的概述:

  • Page— 用于设置导航器历史堆栈的不可变对象。
  • Router— 配置要由导航器显示的页面列表。通常,此页面列表会根据底层平台或应用程序状态的变化而变化。
  • RouteInformationParser,它接受RouteInformationfromRouteInformationProvider并将其解析为用户定义的数据类型。
  • RouterDelegate- 定义应用程序特定的行为,即如何Router了解应用程序状态的变化以及它如何响应它们。它的工作是监听和应用程序状态并使用当前列表RouteInformationParser构建。
  • BackButtonDispatcher— 向 报告返回按钮按下情况Router

以下是这些部分如何交互的示例:

  1. 当平台发出新路由(例如,“books/2”)时,RouteInformationParser会将其转换为您在应用程序中定义的抽象数据类型T(例如,名为 BooksRoutePath的类)。
  2. RouterDelegatesetNewRoutePath方法使用此数据类型调用,并且必须更新应用程序状态以反映更改(例如通过设置selectedBookId)并调用notifyListeners.
  3. notifyListeners被调用时,它告诉Router重建RouterDelegate(使用它的build()方法)
  4. RouterDelegate.build()返回一个新Navigator的 ,其页面现在反映了对应用程序状态的更改(例如selectedBookId)。

pages

pages在其构造函数中有一个新参数。如果Page对象列表发生更改,Navigator则更新要匹配的路由堆栈。

Route

到目前为止,该应用程序可以显示不同的页面,但它无法处理来自底层平台的路由,例如,如果用户在浏览器中更新 URL。

本节介绍如何实现RouteInformationParserRouterDelegate和更新应用程序状态。设置完成后,应用程序将与浏览器的 URL 保持同步。

数据类型

RouteInformationParser路由信息解析为用户定义的数据类型,因此我们将首先定义它:

路由器代理

接下来,添加一个扩展类RouterDelegate

路由信息解析器

提供RouteInformationParser了一个钩子来解析传入的路由 ( RouteInformation) 并将其转换为用户定义的类型 ( BookRoutePath)。使用Uri该类来处理解析:

过渡委托

您可以提供自定义实现,TransitionDelegate以自定义页面列表更改时路由在屏幕上显示(或从屏幕上删除)的方式。如果您需要对此进行自定义,请继续阅读,但如果您对默认行为感到满意,则可以跳过本节。

为定义所需行为TransitionDelegate的 a提供自定义:Navigator

嵌套路由器

这个较大的演示展示了如何Router在另一个Router. 许多应用程序需要为一个目的地提供BottomAppBar路由,并为其上方的一堆视图提供路由,这需要两个 Navigator。为此,应用程序使用应用程序状态对象来存储应用程序特定的导航状态(选定的菜单索引和选定的Book对象)。此示例还显示了如何配置Router处理后退按钮的方法。