Flutter学习之创建一个内嵌的navigation详解.docxVIP

第

Flutter学习之创建一个内嵌的navigation详解

我们在flutter中可以使用Navigator.push或者Navigator.pushNamed方法来向Navigator中添加不同的页面，从而达到页面调整的目的。

一般情况下这样已经足够了，但是有时候我们有多个Navigator的情况下，上面的使用方式就不够用了。比如我们有一个主页面app的Navigator，然后里面有一个匹配好友的功能，这个功能有多个页面，因为匹配好友功能的多个页面实际上是一个完整的流程，所以这些页面需要被放在一个子Navigator中，并和主Navigator区分开。

那么应该如何处理呢？

搭建主Navigator

主Navigator是我们app的一些主要界面，这里我们有三个界面，分别是主home界面，一个setting配置界面和好友匹配界面。

其中好友匹配界面包含了三个子界面，这三个子界面将会用到子路由。

先来看下主路由，主路由的情况跟普通的路由没啥区别，这里我们首先定义和home和setting匹配的两个widget：HomePage和SettingsPage:

classHomePageextendsStatelessWidget{

constHomePage({

super.key,

@override

Widgetbuild(BuildContextcontext){

returnScaffold(

appBar:_buildAppBar(context),

body:Center(

child:Padding(

padding:constEdgeInsets.symmetric(horizontal:24.0),

child:Column(

mainAxisSize:MainAxisSize.min,

children:const[

SizedBox(

width:250,

height:250,

child:Center(

child:Icon(

Icons.home,

size:175,

color:Colors.blue,

SizedBox(height:32),

Text(

跳转到好友匹配页面,

textAlign:TextAlign.center,

style:TextStyle(

fontSize:24,

fontWeight:FontWeight.bold,

floatingActionButton:FloatingActionButton(

onPressed:(){

Navigator.of(context).pushNamed(routeFriendMatch);

child:constIcon(Icons.add),

HomePage很简单，它包含了一个floatingActionButton，当点击它的时候会调用Navigator.pushNamed方法进行路由切换。

然后是SettingsPage,它是一个简单的Column：

classSettingsPageextendsStatelessWidget{

constSettingsPage({

super.key,

@override

Widgetbuild(BuildContextcontext){

returnScaffold(

appBar:_buildAppBar(),

body:SingleChildScrollView(

child:Column(

mainAxisSize:MainAxisSize.min,

children:List.generate(8,(index){

returnListTile(

title:Text(设置项$index),

最后一个页面是FriendMatchFlow,这个页面比较复杂，我们在下一个再进行讲解。

然后我们为主路由在onGenerateRoute方法中进行定义：

voidmain(){

runApp(

MaterialApp(

onGenerateRoute:(settings){

lateWidgetpage;

if(settings.name==routeHome){