打开 app_router_delegate,这个 RouterDelegate 里的 build 方法要返回一个 Navigator,我们可以把这个导航器单独放在一个小部件里。
新建一个文件,放在 lib/app/router 里面,名字是 app_navigator.dart,在这个文件里定义一个 Statefull 类型的小部件,名字是 AppNavigator 。
在小部件的 State 里面,声明一个东西,用 late 标记一下,类型是 AppModel,名字是 appModel,下面再声明一个 PostShowStore 名字是 postShowStore。
添加一个 initState 方法,在方法里面,设置一下 appModel 的值,它的值要读取一个 Provider ,在文件的顶部先导入一个 provider 这个包。
设置一下 appModel 的值,读取一下 AppModel 这个 Provider。 下面设置一下 postShowStore 的值,读取 PostShowStore 这个 Provider 的值。
app_router_delegate
打开 app_router_delegate,剪切一下这个 build 方法里返回的这个 Navigator ,换成一个 AppNavigator 。删除掉上面声明的这个 postShowStore 。
然后在文件的顶部,可以把这些不再需要的导入全部都删除掉。
app_navigator
然后回到 app_navigator ,这个 build 方法 return 的东西,现在我们可以换成一个 Navigator。下面再把这里需要的这些东西导入进来,先导入这个 AppHome,然后是下面这个 PostShow,还有 AuthLogin,还有一个 UserCreate ,再选中这个 SystemChrome,导入需要的 services。
测试
在模拟器测试一下,点击一个内容项目,可以正常打开内容页面,点击返回,可以返回到首页。
改进
继续改进这个小部件,在 build 里面,声明一个 resourceId ,值是 appModel 里的 resourceId,下面声明一个 pageName,值是 appModel 里的 pageName。 再声明一个 setPageName,值是 appModel 里的 setPageName。
下面我们再声明一些表示是否要在页面列表里添加页面的数据,声明一个 hasPostShowPage,值可以判断一下 resourceId != null。
然后声明一个 hasAuthLoginPage,值可以判断一下 pageName 是否等于 AuthLogin。 再声明一个 hasUserCreatePage,它的值判断的是 pageName 是否等于 UserCreate。
下面再定义一个页面,先声明一个 appHomePage,剪切一下 pages 里的这个页面,换成一个 appHomePage,把剪切的东西交给 appHomePage。
在它下面再声明一个 postShowPage,剪切一下 pages 里的这个 PostShow 页面,换成一个 postShowPage,添加这个页面要判断一个条件,这个条件就是 hasPostShowPage。再把剪切的页面交给 postShowPage。
然后声明一个 authLoginPage,剪切一下 pages 里的 AuthLogin 页面,换成 authLoginPage,添加这个页面判断的条件是 hasAuthLoginPage。把剪切的页面交给 authLoginPage。
最后还有一个 userCreatePage,剪切一下 pages 里的 UserCreate 页面。换成 userCreatePage,添加页面判断的条件换成 hasUserCreatePage 。再把剪切的页面交给 userCreatePage。
现在页面上显示的是内容页面,而且没法返回,这是因为添加这个内容页面判断的条件现在有点问题,这里可以再加上一个 pageName 是否等于 PostShow。
在模拟器上再测试一下,现在导航就正常了。
然后找到这个 onPopPage,这里执行的 appModel 里的 setPageName,可以改成 setPageName。
最后我们再给这些页面添加一个名字,在 userCreatePage 里面,添加一个 name,值是 UserCreate。
在 authLoginPage 里面,也添加一个 name,值是 AuthLogin。 再给这个 appHomePage 也添加一个 name,值是 AppHome 。