Flutter 入门指北(Part 6) 之路由

Navigator

Flutter 通过 Navigator  来进行页面之间的跳转，分为 push 系列和 pop 系列操作，带 push 方法为入栈操作，带 pop 方法为出栈操作。Navigator 的 push 方法分两类，一类是带 Name 的，需要在 MaterialApp 下将 routers 属性进行注册，否则将会找不到该路由，还有一个是不带 Name 的，可以通过 Router 直接跳转。

说那么多相信还不如直接上代码和图来的更直接。因为需要展示所有的跳转至少需要 3 个页面，所以我们创建最简单的三个界面，通过文字来区别不同的页面，因为需要调用带有 Name 的方法，所以需要先在 MaterialApp 对路由进行注册。

push / pushNamed 方式跳转

我们在 APage 的 RaiseButton 的 onPressed 方法加入如下代码

或者

效果相同。跳转后，可以发现，在 BPage 的 AppBar 上有个返回按钮，点击可以返回 APage ，那么也就是说通过 push 或者 pushNamed 方式跳转的时候，界面堆栈的变化是直接在原来的堆栈上添加一个新的 page

为了凸显堆栈的变化，所以绘制的图中，会比使用的实际页面多一个

pushReplacement / pushReplacementNamed / popAndPushNamed

将 APage 中的跳转方式进行替换

或者

或者

效果相同，跳转后，可以发现 BPage 的返回按钮消失了，消失了，消失了，我们可以试下点击返回按键，发现 App 直接退出了，也就是说，BPage 替代了 APage 在堆栈中的位置。

CASE 1

这个跳转方式需要通过 CPage 来协助完成，将 APage 的跳转方式修改为 push 方式，然后在 BPage 的第一个按钮加入如下代码

或者

效果相同，点击 BPage 的跳转 CPage 按钮后，界面来到 CPage，然后发现还是没有返回按钮，没有返回按钮，没有返回按钮，点击下返回按键，然后发现 App 直接退出了，退出了，退出了，

CASE 2

你以为这两个方法只是为了把堆栈都清空吗，那就太图样图森破了，这边展示另一种。修改跳转的代码

或者

点击跳转 CPage 以后，发现返回按钮又回来了...就这么回来了...只是修改了一个参数，点击返回按钮，又回到了 APage，你可以在 APage 跳转 BPage 中加入DPage EPage 等等更多的界面，只要保证 BPage 跳转 CPage 的方式不变，点击 CPage 的返回按钮，又回到 APage 了

SUMMARY

为什么会这样变化呢，还记得在 MaterialApp 中注册的 router 么，APage 的 name 对应的为 '/'，也就是说，该方法会把堆栈中在 ModalRoute.withName 所对应的 page 上的所有都 pop 出堆栈，如果把参数换成 /page_b，然后在跳转 CPage 之前加入更多的界面，点击 CPage 的返回按钮，就会回到 BPage

QUESTION

这边再提个小问题，有页面 A，B，C，D，其路由的 name 分别为 '/'，'page_b'，'page_c'，'page_d'，启动顺序为 A -> B -> C -> C -> D，那么在 D 页面使用

那么堆栈最后剩下的页面是 ABCC 还是ABC 呢？答案会在最后公布，小伙伴可以先自己尝试着实现。

pop

在 BPage 的第二个按钮中加入 pop 操作

跳转到 BPage 后点击该按钮，界面回到 APage，那么堆栈的变化很明显了，

popUntil

这个方法还需要借助 CPage ，在 CPage 的按钮中加入

点击返回按钮，界面跳过 BPage 回到了 APage，解释同 pushAndRemoveUntil 那么堆栈的变化也显而易见咯

Navigator 传值

CASE 1 传值给下个界面

修改下 BPage 和 APage 的按钮点击事件

点击 APage 可以查看控制台有输出

2019-03-17 00:04:06.854 12868-12888/com.kuky.demo.flutterartsdemosapp I/flutter: passed value: Message From Page A

也就是成功把值传递过来了。但是，需要传递参数的话，之前在 MaterialApp 下注册的路由就需要去除了。

CASE 2 传值给上个界面

这边可以查看下 pop 方法

既然知道 pop 如何传递值给上个界面，那么如何在上个界面接收这个参数呢，还是看下 push 方法

官方的注释非常明白的指出，会在 Future 中携带 pop 传递的参数，那么我们对 APage 跳转 BPage 以及 BPage 返回 APage 的逻辑进行修改

点击返回后，能够在控制台发现有如下输入

上个页面成功接收到下个页面回传的数据。

CASE 3 通过系统返回按钮传值

在 CASE 2 情况下，通过按钮对返回事件进行监听，那加入我们需求没有这个按钮，只能通过系统默认的返回按钮，或者物理返回按键，那该如何传值呢，这里就需要用 WillpopScope 对系统的返回按钮进行监听。我们对 CPage 做下修改，在 Scaffold 外面包裹一个 WillpopScope

通过返回按钮，BPage 会成功收到从 CPage 返回的 Hello~ 值

以上代码查看 router_main.dart 文件

路由切换动画

假如说我们不想用系统自带的切换动画，需要弄一些比较酷炫的效果该怎么办，那就需要用到自定义路由切换动画了。直接修改 BPage 跳转 CPage 的代码

当再次点击跳转的时候，切换的动画就有开始自带的平滑效果变成缩放效果了。那如果要实现多个动画呢，例如边缩放，边改变透明度，也很容易实现，只需要将 child 替换成 Transition 即可

当然，为了方便重复利用，需要进行封装，例如我们要封装上面的缩放动画效果

然后直接在 Navigator 跳转的时候调用该 Route 就可以了

该部分代码查看 custom_routes.dart 文件

还记得我们之前写的 demo 都是单个文件写一个入口的吗，现在我们就可以写一个统一管理的页面，对这些界面进行管理了，这个工作就交给大家伙自己了，当然我也在源码做了修改，可以查看 main.dart 文件

在前面有提出一个问题，这边公布下答案：堆栈中的页面应该为 ABCC。你答对没有呢~

最后代码的地址还是要的：

1. 文章中涉及的代码：demos

本文转载自异步社区

原文链接：https://www.epubit.com/articleDetails?id=Neefc8afb-209d-4a90-b27a-0b9ab7ab92b8