版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在Flutter中通过Navigator组件管理路由导航。
并提供了管理堆栈的方法。如：Navigator.push和Navigator.pop
基本路由
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){
return FormPage(); // 需要引入这个页面 import '../FormPage.dart';
}
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
传参
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){
return FormPage(title:"表单"); //传值
}
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
// 接收
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:...
);
}
}
命名路由
// 1、配置路由
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home:Tabs(),
initialRoute: '/',
routes: {
'/':(contxt)=>Tabs(),
'/search':(contxt) =>SearchPage(),
'/form': (context) => FormPage(),
},
);
}
}
// 2、路由跳转
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.pushNamed(context, '/search');
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
传参
官方文档：https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments
// 1、配置路由
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final routes = {
'/': (contxt) => Tabs(),
'/search': (contxt) => SearchPage(),
'/form': (context, {arguments}) => FormPage(arguments: arguments),
};
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
onGenerateRoute: (RouteSettings settings) {
// 统一处理
final String name = settings.name;
final Function pageContentBuilder = this.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;
}
}
});
}
}
// 2、跳转传值
RaisedButton(
child: Text("跳转到表单演示页面"),
onPressed: (){
Navigator.pushNamed(context, '/form',arguments: {
"id":20
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
// 3、接收参数
import 'package:flutter/material.dart';
class FormPage extends StatelessWidget {
final Map arguments;
FormPage({this.arguments});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("搜索"),
),
body:Text("我是一个表单页面 ${arguments != null ? arguments['id'] : '0'}")
);
}
}
路由单独模块化
目录
|-pages
|-routes
|—Routes.dart
// routes/Routes.dart
import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart';
//配置路由
final routes={
'/':(context)=>Tabs(),
'/form':(context)=>FormPage(),
'/product':(context)=>ProductPage(),
'/productinfo':(context,{arguments})=>ProductInfoPage(arguments:arguments),
'/search':(context,{arguments})=>SearchPage(arguments:arguments),
};
//固定写法
var 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;
}
}
};
其它
返回上一级
// 返回到上一级页面
Navigator.of(context).pop();
替换路由
比如我们从用户中心页面跳转到了 registerFirst 页面，然后从 registerFirst 页面通过 pushReplacementNamed 跳转到了 registerSecond 页面。这个时候当我们点击 registerSecond 的返回按钮的时候它会直接返回到用户中心。
// 替换路由
Navigator.of(context).pushReplacementNamed('/registerSecond');
返回到根路由
比如我们从用户中心跳转到 registerFirst 页面，然后从 registerFirst 页面跳转到 registerSecond 页面，然后从 registerSecond 跳转到了 registerThird 页面。这个时候我们想的是 registerThird 注册成功后返回到用户中心。 这个时候就用到了返回到根路由的方法。
① 如果前面的路由都用替换路由跳转过来，可以直接pop返回根目录
Navigator.of(context).pop();
② 如果是普通路由跳转过来的
// 返回根
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => new Tabs(index:2)),
(route) => route == null
);
// tabs
class Tabs extends StatefulWidget {
final index;
Tabs({Key key,this.index=0}) : super(key: key); // 可选参数 index
_TabsState createState() => _TabsState(this.index);
}
class _TabsState extends State<Tabs> {
int _currentIndex;
_TabsState(index){ //构造方法，接收传过来的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("设置")
)
],
),
);
}
}