和安卓原生一样,Flutter 也可以返回数据到上一个页面。安卓原生是通过不同的活动启动方式来实现数据的返回,需要借助回调函数,Flutter 是通过同步异步的方式实现的。
返回数据的方法是通过异步方法(async)打开页面,然后同步(await)等待返回结果。
_navigaterToSecondPage(BuildContext context) async{
//等待第二个页面返回结果
final result = await Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondPage()),
);
//底部显示返回信息
Scaffold.of(context).showSnackBar(new SnackBar(content: new Text("$result")));
}
返回数据。
Navigator.pop(context,'data2');
下面将实现一个例子,在首页定义一个按钮进入第二个页面,在第二个页面有两个按钮供用户选择,不同按钮返回不同值,并在第一个页面通过 snackbar 显示返回数据。
1 .定义主页。
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('导航返回数据demo'),
),
body: Center(
child: FirstPage(),
),
);
}
}
2 .添加一个按钮,打开第二个页面,等待返回值。
class FirstPage extends StatelessWidget {
_navigaterToSecondPage(BuildContext context) async{
//等待第二个页面返回结果
final result = await Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondPage()),
);
//底部显示返回信息
Scaffold.of(context).showSnackBar(new SnackBar(content: new Text("$result")));
}
@override
Widget build(BuildContext context) {
return new RaisedButton(
onPressed: () {
_navigaterToSecondPage(context);
},
child: Text('进入第二页'),
);
}
}
3 .第二个页面显示两个按钮,对应返回不同值。
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第二个页面'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding: EdgeInsets.all(20.0),
child: RaisedButton(
onPressed: () {
Navigator.pop(context,'data1');
},
child: Text('返回数据1'),
),
),
new Padding(
padding: EdgeInsets.all(20.0),
child: RaisedButton(
onPressed: () {
Navigator.pop(context,'data2');
},
child: Text('返回数据2'),
),
),
],
),
),
);
}
}
效果如下: