一、介绍
Flutter中的路由(Route)通俗的桨就是页面跳转，类似android的activity跳转，在Flutter中通过导航器（Navigator）组件管理路由导航。并且提供了管理堆栈的方法。如：Navigator.push和Navigator.pop。
Flutter提供了两种配置路由跳转的方式
1、基本路由（静态路由）
2、命名路由（动态路由）
二、基本路由
1、不传值跳转
//固定写法（两种写法，任何一种都行），MyPageA为跳转的目标
Navigator.of(context).push(MaterialPageRoute(builder: (context) => MyPageA()));
Navigator.push(context, MaterialPageRoute(builder: (context)=>MyPageA()));
//销毁当前页面（两种写法，任何一种都行）
Navigator.pop(context)
Navigator.of(context).pop()
2、传值跳转
//跳转目标MyPageB并传值
Navigator.push(context,MaterialPageRoute(builder: (context) => MyPageB(msg: "我是传递过来的值",)));
//MyPageB定义参数，并重写构造方法
String msg;
MyPageB({this.msg="默认值"});
三、基本路由的demo
import 'package:flutter/material.dart';
import 'MyPageA.dart';
import 'MyPageB.dart';
/**
* 首页
*/
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("页面跳转"),
),
body: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text("静态跳转不传值"),
onPressed: () {
// Navigator.of(context).push(MaterialPageRoute(builder: (context)=>MyPageA()));
Navigator.push(context,
MaterialPageRoute(builder: (context) => MyPageA()));
},
),
RaisedButton(
child: Text("静态跳转传值"),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => MyPageB(msg: "我是传递过来的值",)));
},
),
],
)
//
),
);
}
}
MyPageA
import 'package:flutter/material.dart';
/**
* 不传值的目标页面MyPageA
*/
class MyPageA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
Scaffold(
appBar: AppBar(
title: Text("我是页面A"),
),
body: Container(
alignment: Alignment.center,
child: RaisedButton(
child: Text("返回上层"),
onPressed: (){
//销毁当天页面
Navigator.pop(context);
},
),
),
);
}
}
MyPageB
import 'package:flutter/material.dart';
/**
* 传值的目标页面MyPageB
*/
class MyPageB extends StatelessWidget {
String msg;
MyPageB({this.msg="默认值"});
@override
Widget build(BuildContext context) {
return
Scaffold(
appBar: AppBar(
title: Text("我是页面B"),
),
body: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(msg),
RaisedButton(
child: Text("返回上层"),
onPressed: (){
//销毁当天页面
Navigator.pop(context);
},
),
],
)
),
);
}
}
5dcd9aec0494449859cf11ae432a72d.png
264ea79e674f736d1a29da08f2d7be6.png
eed07cb2457b7b85d9388fc6505eaa5.png
四、命名路由
1、不传值跳转
//在MaterialApp根目录添加
return MaterialApp(
routes: {
'/pageA': (content) => MyPageA(),
},
home: RouteStudy(),
);
//跳转的时候直接调用
Navigator.pushNamed(context, '/pageA');
2、传值跳转
A、配置路由参数
final routes = {
'/pageA': (content) => MyPageA(),//不传值
'/pageC': (content,{arguments}) => MyPageC(arguments:arguments)//传值
};
B、MaterialApp根目录配置路由监听
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;
}
}
},
C、跳转的时候调用
Navigator.pushNamed(context, "/pageC",arguments: {
"name":"随便写点",
});
D、目标页面接收参数
class MyPageC extends StatelessWidget {
final arguments;
MyPageC({this.arguments});
@override
Widget build(BuildContext context) {
return null;
}
}
五、命名路由的demo
void main() {
runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
final routes = {
'/pageA': (content) => MyPageA(),
'/pageC': (content,{arguments}) => MyPageC(arguments:arguments)
};
@override
Widget build(BuildContext context) {
return MaterialApp(
home: RouteStudy(),
// ignore: missing_return
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;
}
}
},
);
}
}
class RouteStudy extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("命名路由跳转"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
Navigator.pushNamed(context, '/pageA');
},
child: Text("命名路由不传值"),
),
RaisedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageC",arguments: {
"name":"随便写点",
});
},
child: Text("命名路由传值"),
)
],
),
);
}
}
MyPageA
/**
* 不传值的目标页面
*/
class MyPageA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
Scaffold(
appBar: AppBar(
title: Text("我是页面A"),
),
body: Container(
alignment: Alignment.center,
child: RaisedButton(
child: Text("返回上层"),
onPressed: (){
//销毁当天页面
Navigator.pop(context);
},
),
),
);
}
}
MyPageC
/**
* 传值的目标页面MyPageC
*/
class MyPageC extends StatelessWidget {
final arguments;
MyPageC({this.arguments});
@override
Widget build(BuildContext context) {
return
Scaffold(
appBar: AppBar(
title: Text("我是页面C"),
),
body: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(arguments["name"]),
RaisedButton(
child: Text("返回上层"),
onPressed: (){
//销毁当天页面
// Navigator.pop(context);
Navigator.of(context).pop();
},
),
],
)
),
);
}
}
da7c6558d1d06f6e337ca7164d98ac0.png
c26b113e73dc480e4746a87755f1f92.png
4fb7d790fc46105b5e4fd3a2af00be4.png