路由管理其实就类似于原生开发中两个界面的跳转
先创建一个新的界面NewRoute
class NewRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("New route"),
),
body: Center (
child: Text("This is new route"),
),
}
}
在首页添加一个按钮,点击事件跳转到新界面
FlatButton(
child: Text("Open New Route"),
textColor: Colors.red,
onPressed: () {
Navigator.push( context,
MaterialPageRoute(builder: (context) {
return NewRoute();
}));
},
),
新界面添加一个接收参数的text,显示在界面上,同时添加一个完成按钮,执行返回操作,并回调数据
class NewRoute extends StatelessWidget {
NewRoute({
Key key,
this.text, // 接收一个text参数
}) : super(key: key);
final String text;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("New route"),
),
body: Center (
// child: Text("This is new route"),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(text ?? "error"),
RaisedButton(
onPressed: () => Navigator.pop(context, "我是返回值"),
child: Text("完成"),
)
],
),
),
);
}
}
在首页中修改点击按钮,接收返回后的回调数据result
,使用async
和await
组合.
FlatButton(
child: Text("Open New Route"),
textColor: Colors.red,
onPressed: () async {
var result = await Navigator.push( context,
MaterialPageRoute(builder: (context) {
return NewRoute(text: "hello world");
}));
print(result);
},
),
在MyApp
中注册路由routes
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
"new_page": (context) => NewRoute(),
// 省略其它路由注册信息...
},
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
首页也可以注册在routes
中, 进行改造
return MaterialApp(
title: 'Flutter Demo',
initialRoute: "/", // "/"路由作为首页
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
"new_page": (context) => NewRoute(),
"/": (context) => MyHomePage(title: 'Flutter Demo Home Page'),
},
// home: MyHomePage(title: 'Flutter Demo Home Page'),
);
在首页点击按钮事件进行修改
FlatButton(
child: Text("Open New Route"),
textColor: Colors.red,
onPressed: () async {
// var result = await Navigator.push( context,
// MaterialPageRoute(builder: (context) {
// return NewRoute(text: "hello world");
// }));
var result = await Navigator.pushNamed(context, "new_page");
print(result);
},
),
跳转
FlatButton(
child: Text("Open New Route"),
textColor: Colors.red,
onPressed: () async {
// var result = await Navigator.push( context,
// MaterialPageRoute(builder: (context) {
// return NewRoute(text: "hello world");
// }));
var result = await Navigator.pushNamed(context, "new_page", arguments: "hello world");
print(result);
},
),
接收
@override
Widget build(BuildContext context) {
var args = ModalRoute.of(context).settings.arguments;
}