使用 Navigator 声明式接口(Pages API)

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

之前我们在介绍导航路由的时候,使用了 Navigator 提供的命令式的接口,也就是可以使用 Navigator.push 还有 Navigator.pop 方法往 Navigator 管理的路由堆里面添加或者删除路由。

Navigator 还提供了一种声明式的接口,就是我们可以在应用里声明一下,在什么状态下这个路由堆会是什么样的。这里要用的是 Pages API,就是可以通过 Navigator 里的 pages 这个属性,配置一个页面的列表。这里说的页面其实就是带一些配置数据的路由。

也就是 Navigator 会把通过 pages 属性提供的一组页面列表转换成路由堆,这组页面列表发生变化以后, Navigator 管理的路由堆也会发生对应的变化。比如你在这个页面列表里添加了新的页面,在路由堆里就会出现对应的路由,如果去掉了页面列表里的页面,在路由堆里也会去掉对应的路由。

pages

打开 app.dart,先去掉在这 MaterialApp 里添加的 onGenerateRoute 。换成一个 home ,对应的值用一个 Navigator 小部件 ,在它里面可以添加一个 pages,配置一组页面,Navigator 会把这组页面转换成一堆路由。

我们可以自己定义一些页面,让页面继承一下 Page 这个类就行了。这里可以直接使用一个现成的页面,名字是 MaterialPage,也就是 Material 风格的页面,页面都需要有个标识,Flutter 会根据这个标识来判断处理的是哪个页面。

这个标识就相当于是给这个页面起了一个名字,在 MaterialPage 里面,可以使用 key 属性设置页面的标识,对应的值是一个 ValueKey,名字是 AppHome。页面的 child 是这个页面对应的小部件,这里用一下 AppHome 这个小部件。

你会发现,应用现在默认显示的就是  AppHome 这个小部件。在这组页面列表里再添加一个页面,同样使用一个 MaterialPage 页面,用 key 给它添加一个标识,ValueKey,名字是 About 。注意页面列表里的页面的标识不能重名。它的 child 用一下 About 这个小部件。

现在应用默认显示的就会是 About 这个小部件。因为给 Navigator 提供的页面列表里面,About 这个页面是最后一个,生成的对应的路由堆,跟这个页面对应的路由也会是最后一个,也可以说是一堆路由里的最上面的那个。跟这个路由对应的小部件是 About,所以应用当前显示的就是 About 这个小部件。

再试一下,把这个 About 页面注释掉,这样这组 pages 里面就只剩下 AppHome 这个页面了,对应的路由堆里面也就只有 AppHome ,所以应用显示的就会是 AppHome ,再恢复一下 About  这个页面,生成的对应的路由堆里最上面那个路由对应的小部件是 About,所以应用的界面就又会显示 About 这个小部件。

使用 Navigator 声明式接口(Pages API)《 Flutter 2:路由导航 #2 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点