Flutter学习之创建一个内嵌的navigation详解 |
||||||||||||
|
+ 目录
简介我们在flutter中可以使用Navigator.push或者Navigator.pushNamed方法来向Navigator中添加不同的页面，从而达到页面调整的目的。 一般情况下这样已经足够了，但是有时候我们有多个Navigator的情况下，上面的使用方式就不够用了。比如我们有一个主页面app的Navigator，然后里面有一个匹配好友的功能，这个功能有多个页面，因为匹配好友功能的多个页面实际上是一个完整的流程，所以这些页面需要被放在一个子Navigator中，并和主Navigator区分开。 那么应该如何处理呢？
搭建主Navigator主Navigator是我们app的一些主要界面，这里我们有三个界面，分别是主home界面，一个setting配置界面和好友匹配界面。 其中好友匹配界面包含了三个子界面，这三个子界面将会用到子路由。 先来看下主路由，主路由的情况跟普通的路由没啥区别，这里我们首先定义和home和setting匹配的两个widget：HomePage和SettingsPage:
?
HomePage很简单，它包含了一个floatingActionButton，当点击它的时候会调用 Navigator.pushNamed方法进行路由切换。 然后是SettingsPage,它是一个简单的Column：
?
最后一个页面是FriendMatchFlow,这个页面比较复杂，我们在下一个再进行讲解。 然后我们为主路由在onGenerateRoute方法中进行定义：
?
主路由很简单，跟普通的路由没有太多的区别。
构建子路由接下来是构建子路由的步骤。在主路由中，如果路由的名称是routeFriendMatch，那么就会跳转到FriendMatchFlow。 而这个flow页面实际上是由几个子页面组成的：选择好友页面，等待页面，匹配页面和匹配完毕页面。 具体的页面代码这里就不写了，我们主要来讲一下子路由的使用。 对于FriendMatchFlow来说，它本身是一个Navigator,所以我们的build方法是这样的：
?
因为他需要根据用户的不同点击来进行内部路由的切换，所以需要保存对当前子Navigator的应用，所以这里FriendMatchFlow是一个StatefulWidget,并且上面的_navigatorKey是一个GlobalKey对象，以提供对子Navigator的引用：
?
这里的_onGenerateRoute方法，跟主路由也是很类似的，主要定义的是子路由中页面的跳转：
?
|
