您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-14（路由中的路由换路返回到根路由)

2020-04-30【Flutter】1639人已围观

简介## 一、Flutter 中返回到上一级页面 `Navigator.of(context).pop();` ## 二、Flutter 中替换路由比如我们从用户中心页面跳转到了 `registerFirst` 页面，然后从 `register1` 页面通过 `pushReplacementNamed` 跳转到了 `register2` 页面。这个时候当我们点击 `register2` 的返回按钮的时候它会直接返回到用户中心 `Navigator.of(context).pus

## 一、Flutter 中返回到上一级页面

`Navigator.of(context).pop();`

## 二、Flutter  中替换路由

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

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

## 三、Flutter 返回到根路由

比如我们从用户中心跳转到 `registerFirst` 页面，然后从 `registerFirst` 页面跳转到 `registerSecond`
页面，然后从 `registerSecond` 跳转到了 `registerThird` 页面。这个时候我们想的是 `registerThird`
注册成功后返回到用户中心。 这个时候就用到了返回到根路由的方法。

```
//返回根
Navigator.of(context).pushAndRemoveUntil(
  new MaterialPageRoute(builder: (context) => new Tabs()),                  
   (route) => route == null
);
```

> 设置Tals.dart接受参数显示对应的页面

```
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

class Tabs extends StatefulWidget {
  final index;
  Tabs({Key key,this.index=0}) : super(key: key);
  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {

int _currentIndex;
  _TabsState(index){
    this._currentIndex=index;
  }
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   //配置对应的索引值选中
          onTap: (int index){
              setState(() {  //改变状态
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //选中的颜色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs可以有多个按钮
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      );
  }
}
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-13(中的普通路由、普通路由传值、命名路由、命名路由传值)

下一篇：flutter-15(AppBar 自定义顶部导航按钮以及 TabBar 定义顶部 Tab 切换)