用户登录

在应用里创建一个路由器可以直接新建一个 Router,让它作为 MaterialApp 小部件的 home 属性的值,或者也可以使用 MaterialApp 的 router 构造方法。

打开 app.dart,这里我们先剪切一下这个 Navigator 里的 pages 还有 onPopPage ,然后把这个 home 属性的值全部都删除掉,换成一个 Router 小部件,创建一个路由器,这里要设置一下这个路由器的代表,routerDelegate 属性的值,可以新建一个 AppRouterDelegate。应用状态有变化的时候这个路由器就会调用路由器代表里的 build 方法构建一个 Navigator。

打开 app_router_delegate.dart,把刚才剪切的 Navigator 的 pages 还有 onPopPage 粘贴到这个 build 方法里的 Navigator 里面。

选中 AppHome ,导入需要的东西,再选中下面这个 About ,同样要导入需要的东西。

这里还会用到 state 里的数据还有方法,这个 state 就是 Provider 提供的 appModel 实例。我们要想个办法在这个类里面使用这个 appModel 实例里的东西。可以这样,先在这个类里面添加一个 AppModel 类型的属性,名字是 appModel,然后给这个构造方法添加一个参数,this.appModel,这样会把参数的值交给 appModel 属性。

创建这个路由器代理的时候可以提供这个 appModel,这样就可以在这个类里面使用 appModel 里的东西了,找到 Navigator 的 pages,判断的条件可以设置成 appModel 里的 pageName,然后在 onPopPage 里面,执行的是 appModel 里的 setPageName。

回到 app.dart,这里可以声明一个 AppModel 类型的属性,名字是 appModel,新建一个 AppModel 实例,作为这个 appModel 属性的值。然后修改一下这里用 Provider 提供的东西,返回的是这个 appModel 。 再找到 AppRouterDelegate,创建它的时候提供一个 appModel 。

通知路由器

现在你会发现应用的界面上会显示 AppHome,路由器调用路由代表里的 build 方法得到了一个导航器,这个导航器里面现在只有一个 AppHome 页面。因为 appModel 里的 pageName 的值不等于 About,所以在 pages 里面只会包含这个 AppHome 页面。

使用路由器管理路由(Router)《 Flutter 2:路由导航 #2 》

统计

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

社会化网络

关于

微信订阅号

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