Flutter中路由返回的多种方式

1. 返回上一级路由

Navigator.of(context).pop();

在页面中调用这个方法可以返回进入当前页面的上一级页面。

2. 替换路由

Navigator.of(context).pushReplacementNamed('目标页面路由');

当页面中跳转顺序是A页面-B页面-C页面，如果在B页面中使用上面这个命令跳转到C页面，在C页面返回时会直接跳转到A页面。如果在A页面也是使用的此命令跳转到B页面，那么在C页面中返回时会返回A页面的上一级页面。

3. 返回到指定的路由地址

Navigator.of(context).pushAndRemoveUntil(
// 返回到指定的路由（Tabs为页面组件，需要在顶部引入，index为组件的参数)
new MaterialPageRoute(builder:(context)=>new Tabs(index:2)),
// 清空路由
(route)=>route==null
);

上面这个命令相当于是进行路由重定向，可以很灵活的控制路由跳转。需要注意的是，要跳转到的目标页面组件必须在顶部引入。

4. 路由跳转实例

项目结构：

main.dart 主文件代码：

// main.dart
import 'package:flutter/material.dart';
// 引入路由管理
import 'routes/Routes.dart';
// 主函数
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
// 初始化的路由
initialRoute: '/',
// 监听路由事件
onGenerateRoute:onGenerateRoute,
// 主题
theme: ThemeData(primarySwatch:Colors.yellow)
);
}
}

Routes.dart 路由文件代码：


// lib/routes/Routes.dart
import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/user/Login.dart';
import '../pages/user/RegisterFirst.dart';
import '../pages/user/RegisterSecond.dart';
import '../pages/user/RegisterThird.dart';
final routes={
'/':(context)=>Tabs(),
'/form':(context)=>FormPage(),
'/search':(context,{arguments})=>SearchPage(arguments:arguments),
'/login':(context)=>LoginPage(),
'/registerFirst':(context)=>RegisterFirstPage(),
'/registerSecond':(context)=>RegisterSecondPage(),
'/registerThird':(context)=>RegisterThirdPage()
};
Function OnGenerateRoute=(RouteSettings settings) {
// 官网传参示例
// 获取当前路由名称
final String name = settings.name;
// 获取路由名称对应的处理方法
final Function pageCOntentBuilder= routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments)
);
return route;
}else{
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context)
);
return route;
}
}
};

Tabs.dart 文件代码：


// lib/pages/Tabs.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{
// 当前选中标签的下标
int _currentIndex;
// 当前页面数组
List _pageList = [
HomePage(),
CategoryPage(),
SettingPage()
];
_TabsState(index){
this._currentIndex = index;
}
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
// 导航条
appBar:AppBar(title:Text('Flutter App')),
// 主体
body:this._pageList[this._currentIndex],
// 底部导航条
bottomNavigationBar: BottomNavigationBar(
// 当前菜单下标
currentIndex: this._currentIndex,
// 点击事件,获取当前点击的标签下标
onTap: (int index){
// 改变状态
setState(() {
this._currentIndex=index;
});
},
// 图标大小
iconSize: 30.0,
// 选中图标的颜色
fixedColor: Colors.red,
// 多个标签页的动画效果
type: BottomNavigationBarType.fixed,
items: [
// 只能是BottomNavigationBarItem的类型
BottomNavigationBarItem(
icon:Icon(Icons.home),
label:"首页"
),
BottomNavigationBarItem(
icon:Icon(Icons.category),
label:"分类"
),
BottomNavigationBarItem(
icon:Icon(Icons.settings),
label:"设置"
)
]
),
));
}
}


Search.dart 文件代码：

// lib/pages/Search.dart
import 'package:flutter/material.dart';
// 搜索页面
class SearchPage extends StatefulWidget {
final Map arguments;
// 有状态组件接受传参
SearchPage({Key key,this.arguments}) : super(key: key);
_SearchPageState createState() => _SearchPageState(arguments:this.arguments);
}
class _SearchPageState extends State {
Map arguments;
_SearchPageState({this.arguments});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('搜索')
),
body:Container(
child:Text('搜索商品ID为${arguments["id"]}')
)
);
}
}

Form.dart 文件代码：

// lib/pages/Form.dart
import 'package:flutter/material.dart';
// 表单页面
class FormPage extends StatelessWidget {
final String title;
// 无状态组件接受传参
FormPage({this.title="表单"});
@override
Widget build(BuildContext context) {
return Scaffold(
// 浮动按钮
floatingActionButton: FloatingActionButton(
child: Text('返回'),
// 点击事件
onPressed: (){
// 返回上一级页面
Navigator.of(context).pop();
},
),
appBar: AppBar(
title:Text(this.title)
),
body: ListView(
children: [
ListTile(
title:Text('这是表单页面')
)
]
),
);
}
}

Login.dart 文件代码：

// lib/pages/user/Login.dart
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
const LoginPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("登录")),
body: Center(
child: Column(
children: [
SizedBox(height: 40),
Text('欢迎使用本程序'),
RaisedButton(
child: Text("立即登录"),
onPressed: () {
// 返回上一页
Navigator.of(context).pop();
},
)
],
),
),
);
}
}


RegisterFirst.dart 文件代码：

// lib/pages/user/RegisterFirst.dart
import 'package:flutter/material.dart';
class RegisterFirstPage extends StatelessWidget {
const RegisterFirstPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("第一步：输入手机号")),
body: Center(
child:Column(
children: [
SizedBox(height: 40),
Text("请输入您的手机号"),
SizedBox(height: 40),
RaisedButton(
child: Text('下一步'),
onPressed: () {
// 正常路由跳转，左上角点击返回时会原路返回
Navigator.pushNamed(context, '/registerSecond');
// 替换路由跳转，左上角点击返回时会忽略本次跳转，直接返回到上一级路由
// Navigator.of(context).pushReplacementNamed('/registerSecond');
},
)
],
)
)
);
}
}

RegisterSecond.dart 文件代码：

// lib/pages/user/RegisteSecond.dart
import 'package:flutter/material.dart';
class RegisterSecondPage extends StatelessWidget {
const RegisterSecondPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("第二步：输入验证码")),
body: Center(
child:Column(
children: [
SizedBox(height: 40),
Text("请输入验证码完成注册"),
SizedBox(height: 40),
RaisedButton(
child: Text('下一步'),
onPressed: () {
// 正常路由跳转，左上角点击返回时会原路返回
Navigator.pushNamed(context, '/registerThird');
// 替换路由跳转，左上角点击返回时会忽略本次跳转，直接返回到上一级路由
// Navigator.of(context).pushReplacementNamed('/registerThird');
},
)
],
)
)
);
}
}


RegisterThird.dart 文件代码：

// lib/pages/user/RegisteThird.dart
import 'package:flutter/material.dart';
// 跳转到指定路由必须引入相应的路由页面组件
import '../Tabs.dart';
class RegisterThirdPage extends StatelessWidget {
const RegisterThirdPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("第三步：完成注册")),
body: Center(
child: Column(
children: [
SizedBox(height: 40),
Text("请输入密码完成注册"),
SizedBox(height: 40),
RaisedButton(
child: Text('确定'),
onPressed: () {
// 清除之前所有push的页面路由，直到跳转到指定的路由
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder:(context)=>new Tabs(index:2)),
(route)=>route==null
);
},
)
],
)
)
);
}
}


Category.dart 文件代码：

// lib/pages/tabs/Gategory.dart
import "package:flutter/material.dart";
// 分类页面
class CategoryPage extends StatefulWidget {
CategoryPage({Key key}) : super(key: key);
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State {
@override
Widget build(BuildContext context) {
return Column(
// 主轴对齐式式
mainAxisAlignment:MainAxisAlignment.center,
// 交叉轴对齐方式
crossAxisAlignment: CrossAxisAlignment.center,
children:[
RaisedButton(
child: Text("跳转到表单页面"),
// 点击事件
onPressed: () {
Navigator.pushNamed(context, '/form');
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
]
);
}
}

Home.dart 文件代码：

// lib/pages/tabs/Home.dart
import 'package:flutter/material.dart';
// 主页页面
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text("跳转到搜索页面"),
// 点击事件
onPressed: () {
// 跳转路由传值
Navigator.pushNamed(context, '/search',arguments: {
"id":123
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
],
);
}
}


Setting.dart 文件代码：

// lib/pages/tabs/Setting.dart
import "package:flutter/material.dart";
// 设置页面
class SettingPage extends StatefulWidget {
SettingPage({Key key}) : super(key: key);
_SettingPageState createState() => _SettingPageState();
}
class _SettingPageState extends State {
@override
Widget build(BuildContext context) {
return Center(
child:Column(
children: [
RaisedButton(
child: Text("跳转到登录页面"),
onPressed: () {
Navigator.pushNamed(context, '/login');
},
),
RaisedButton(
child: Text("跳转到注册页面"),
onPressed: () {
Navigator.pushNamed(context, '/registerFirst');
},
),
],
)
);
}
}