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

返回到上一级页面

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("用户中心")),
            ]),
      ),
    );
  }
}