《Flutter》-- 9.路由与导航

参阅书籍：

《Flutter跨平台开发入门与实践》-- 向治洪（著）

9. 路由与导航

9.1 路由基础

9.1.1 基本概念

在前端应用中，页面又称路由，是屏幕或应用程序页面的抽象。

Flutter的路由管理和导航借鉴了前端和客户端中的设计思路，提供了Route和Navigator对路由进行统一管理。

Route是页面的一个抽象概念，可以用它创建界面、接收参数以及响应Navigator的打开与关闭；Navigator用于管理和维护路由栈，打开路由页面即执行入栈操作，关闭路由页面即执行出栈操作。

Navigator组件的常用操作方法：

1）push()：将给定的路由页面放到路由栈里面，返回值是一个Future对象，用于接收路由出栈时的返回数据；

2）pop()：将位于栈顶的路由从路由栈移除，返回结果为路由关闭时上一个页面所需的数据。

在Flutter开发中，根据是否需要提前注册路由标识符，路由管理可以分为基本路由和命名路由两种。

9.1.2 基本路由

基本路由无需提前注册，在页面切换时需要手动构造页面的实例，使用起来相对简单灵活，适用于应用中页面不多的场景。

如果要打开一个新的页面，需要创建一个MaterialPageRoute对象实例，然后调用Navigator.push()；如果要返回上一个页面，调用Navigator.pop()。

MaterialPageRoute是Flutter提供的路由模板，是PageRoute的子类，定义了路由创建及切换时过渡动画的相关接口和属性，并自带页面切换动画。

示例代码：

示例效果：

9.1.3 命名路由

命名路由需要提前注册路由页面标识符，在页面切换时通过路由标识符打开一个新的路由页面。

在Flutter中，路由表是一个Map<String, WidgetBuilder>结构，其中第一个参数对应页面的别名，第二个参数对应页面。

在路由表中注册好页面后，在其他页面中通过Navigator.pushNamed()来打开注册的页面。

Flutter提供了一个onUnknownRoute属性，用来在注册路由表时对未知的路由标识符进行统一的页面跳转处理。

示例代码：

示例效果：

9.1.5 路由传参

可以在打开路由时传递参数，在目标页面通过ModalRoute的RouteSettings获取页面传递的参数。

如果需要返回上一个页面时回传参数，可以在使用push()打开目标页面时使用then()监听目标页面的返回值。

示例代码：

示例效果：

9.2 路由栈

Flutter路由栈其实就是一个后进先出的线性表，路由栈管理本质上就是一个入栈和出栈的过程，入栈就是将页面放到路由栈的顶部，出栈则是从路由的顶部移除页面。

1）pushReplacementNamed

使用pushReplacement或pushReplacementNamed打开一个新页面时，路由栈顶部的页面会被当前页面所替换。

2）popAndPushNamed

popAndPushNamed的作用与pushReplacementNamed类似，打开一个新页面时，路由栈的栈顶页面会被当前页面替换。

不同的是，popAndPushNamed会同时执行出栈和入栈动画，而pushReplacementNamed只执行入栈动画。

3）pushNamedAndRemoveUntil

pushNamedAndRemoveUntil和pushAndRemoveUntil的作用类似，主要用于向路由栈中添加一个新页面，并删除路由栈中所有之前的页面。

如果不需要清空之前的页面，可以将表达式设置为true，即(Route router) => true。

除了用于删除路由栈中所有之前的页面外，pushNamedAndRemoveUntil还可以用来删除指定个数的页面。

上面的代码会打开一个新的页面page_d，同时删除page_b页面之上的所有页面。

如果要移除路由栈中某个指定的页面，可以使用Navigator.removeRoute()或者Navigator.removeRouteBelow()。

上面的代码会从路由栈中移除PageC页面。

4）popUntil

popUntil的作用与pushNamedAndRemoveUntil类似，主要用于清除指定页面之上的所有页面。popUntil没有执行push操作，直接执行pop操作，直到返回到指定的页面。

上面的代码会清除page_a页面之上的所有页面。

9.3 自定义路由

如果要修改默认的路由转场动画，就需要做一些自定义开发。在Flutter中，自定义路由需要用到PageRouteBuilder类，PageRouteBuilder是所有自定义路由的基类。

PageRouteBuilder的构造函数如下：

示例代码：

除了使用Flutter提供的路由方案外，还可以使用第三方路由框架来实现页面的管理和跳转。Fluro是一款优秀的Flutter企业级路由框架，非常适合中大型项目，它具有层次分明、条理化、方便扩展和便于整体管理路由等特点。