用户登录

创建 MaterialApp 这个小部件的时候可以给应用设置一个路由表,就是给路由起个名字,再用一个 WidgetBuilder 构建路由对应的小部件。路由有了名字以后,往 Navigator 管理的路由堆里添加路由的时候就可以使用路由的名字了。

打开 app.dart ,找到 MaterialApp ,这里可以删除掉这个小部件的 home 属性,换成一个 routes 属性定义一个路由表,它的值是一个 Map,在这个 Map 里的项目的 key 就是给路由起的名字,Flutter 路由的名字会用地址路径的形式定义,添加一个 / 表示根路由,对应的 value 是一个 WidgetBuilder,小部件构建器。一个 context 参数,构建器返回的东西是一个小部件,这里用一下 AppHome 这个小部件。

下面可以再定义一条路由,路由的名字是 /about,对应的值是一个小部件构建器,一个 context 参数,返回的是 About() 小部件。

Flutter 默认会显示这个根路由,也就是这条路由是应用的初始路由,在 MaterialApp 里面可以使用 initialRoute 这个属性配置一下这个初始路由,默认是 / 这条路由。如果把这个初始路由改成 /about,保存一下。如果应用界面出现错误提示,可以打开编辑器的调试,重新启动一下。

现在打开应用的时候默认显示的就是 /about 这个路由,路由对应的是 About 这个小部件,也就会显示这个小部件里的东西。这里还是把这个初始的路由设置成默认的 / 。

有了这个路由表以后,往 Navigator 管理的路由堆里面添加路由的时候就可以使用路由的名字了。打开 playground_routing.dart, 在这个按钮的点按回调里面,用了 Navigator.push 方法往路由堆里添加了一个新的路由。

现在我们可以换一种方法,这里用一下 Navigator 提供的 pushNamed 这个方法,第一个参数是 context,第二个参数是路由的名字,比如 /about 。这样 Flutter 会根据这个名字找到这条路由,然后根据对应的小部件构建器创建一个路由,再把它添加到路由堆里。现在就不需要在这个小部件里再导入 About 这个小部件了,可以把它从文件顶部删除掉。

下面可以测试一下,在练习页面,按一下页面上这个按钮,执行了 Navigator.pushNamed 以后,现在显示的就是 About 这个小部件。

定义路由表使用带名字的路由《 Flutter 2:路由导航(一) 》

统计

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

社会化网络

关于

微信订阅号

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