Flutter 组件之路由替换、返回跟路由、从哪来回哪去

我不是女神ヾ 2023-07-17 11:26 62阅读 0赞

##### 返回到上一级页面 #####

Navigator.of(context).pop();

原理：不清除路由路径（路由栈）,保存所有的路由过程  
需求：

*  正常返回上一页面

##### 替换路由 #####

原理：每跳转一个路由便清除上一路由页面,所以操作到最后一步返回时直接到首页。  
需求：

*  我们从首页面跳转到了 **registerFirst** 页面
 *  然后从 **registerFirst** 页面通过 `pushReplacementNamed` 跳转到了 **registerSecond** 页面
 *  这个时候当我们点击 **registerSecond** 的返回按钮的时候它会直接返回到用户中心

Navigator
        .of(context)
        .pushReplacementNamed('/registerSecond');

##### 返回到根路由 #####

原理：清除所有路由页面,直接跳转到首页  
需求：

*  我们从首页跳转到 **registerFirst** 页面
 *  然后从 **registerFirst** 页面跳转到 **registerSecond** 页面
 *  再然后从 **registerSecond** 跳转到了 **registerThird** 页面。
 *  这个时候我们想的是 **registerThird** 注册成功后返回到用户中心。

Navigator
        .of(context)
        .pushAndRemoveUntil(
        	//这里的Tabs()就是引入的跟路由页面
            new MaterialPageRoute(builder: (context) => new Tabs()),
            )
        );

##### 从哪来回哪去? #####

原理：还是一样使用返回根路由,逻辑中操作你所要跳转的页面。  
需求：

*  我们从用户中心跳转到 **registerFirst** 页面
 *  然后从 **registerFirst** 页面跳转到 **registerSecond** 页面
 *  再然后从 **registerSecond** 跳转到了 **registerThird** 页面。
 *  这个时候我们想的是 **registerThird** 注册成功后返回到用户中心。

Navigator
        .of(context)
        .pushAndRemoveUntil(
        	//不操作会直接返回到首页,包括tabBar
        	//参数传递,index=1 就是首页,每一个索引对应的是tabBar的不同页面 ,比如 2 就是用户中心
            new MaterialPageRoute(builder: (context) => new Tabs(index:2)),
            )
        );

`Tabs()`页面示例代码

import 'package:flutter/material.dart';
    
    import 'HomePage.dart';
    import 'Payment.dart';
    import 'People.dart';
    class HomePageSet extends StatefulWidget { 
      final index;//定义常量以及下面的可选参数并且设置默认值
      HomePageSet({ Key key,this.index=0}) : super(key: key);
    
      @override
      _HomePageSetState createState() => _HomePageSetState(this.index);
    }
    
    class _HomePageSetState extends State<HomePageSet> { 
      int curIndex = 0;//定义接收并且赋值
      _HomePageSetState(index){ 
    		this.curIndex = index;
    	} 
      List PageList = [
        HomePage(),
        Payment(),
        People(),
      ];
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Scaffold(
            appBar: AppBar(
              title: Text("StatefulWidget,BottomNavigationBar"),
            ),
            body: this.PageList[this.curIndex],
            bottomNavigationBar: BottomNavigationBar(
                currentIndex: curIndex,
                onTap: (int index) { //底布菜单通过这里的索引来设置是否选中
                  print(index);
                  setState(() { //动态设置页面索引
                    this.curIndex = index;
                  });
                },
                iconSize: 40,
                fixedColor: Colors.orange,
                type: BottomNavigationBarType.fixed,
                //配置多个底布菜单
                items: [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.home), title: Text("首页")),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.payment), title: Text("推荐")),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.people), title: Text("用户中心")),
                ]),
          ),
        );
      }
    }