内容简介：在某些情况下，我们可能希望从新路由返回数据。例如，假设我们我们怎样才能做到这一点？使用
在某些情况下，我们可能希望从新路由返回数据。例如，假设我们 push 一个向用户提供两个选项的新路由。当用户点击选项时，我们想要通知我们的第一个路由用户的选择，以便它可以对该信息采取行动！
我们怎样才能做到这一点？使用 Navigator.pop ！
路线
- 定义主路由
- 添加一个启动选择路由的按钮
- 使用两个按钮显示选择路由
- 点击按钮时，关闭选择路由
- 在主屏幕上用snackbar显示选择的那项
1.定义主屏幕
主路由将显示一个按钮。点击时，它将启动选择路由！
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Returning Data Demo'),
),
// We'll create the SelectionButton Widget in the next step
body: Center(child: SelectionButton()),
);
}
}
2.添加一个启动选择路由的按钮
现在，我们将创建SelectionButton。我们的选择按钮将：
SelectionScreen SelectionScreen
class SelectionButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
_navigateAndDisplaySelection(context);
},
child: Text('Pick an option, any option!'),
);
}
// A method that launches the SelectionScreen and awaits the result from
// Navigator.pop
_navigateAndDisplaySelection(BuildContext context) async {
// Navigator.push returns a Future that will complete after we call
// Navigator.pop on the Selection Screen!
final result = await Navigator.push(
context,
// We'll create the SelectionScreen in the next step!
MaterialPageRoute(builder: (context) => SelectionScreen()),
);
}
}
3.使用两个按钮显示选择路由
现在，我们需要建立一个选择路由！它将包含两个按钮。当用户点击按钮时，它应该关闭选择路由，并让主路由知道点击了哪个按钮！
现在，我们将定义UI，并确定如何在下一步中返回数据。
class SelectionScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Pick an option'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: () {
// Pop here with "Yep"...
},
child: Text('Yep!'),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: () {
// Pop here with "Nope"
},
child: Text('Nope.'),
),
)
],
),
),
);
}
}
4.点击按钮时，关闭选择路由
现在，我们要修改两个按钮的onPressed回调！为了将数据返回到第一个路由，我们需要使用 Navigator.pop 方法。
Navigator.pop 接收一个名为result的可选的第二个参数。如果我们提供结果，它将在SelectionButton中返回到 Future 中！
是的按钮
RaisedButton(
onPressed: () {
// Our Yep button will return "Yep!" as the result
Navigator.pop(context, 'Yep!');
},
child: Text('Yep!'),
);
否的按钮
RaisedButton(
onPressed: () {
// Our Nope button will return "Nope!" as the result
Navigator.pop(context, 'Nope!');
},
child: Text('Nope!'),
);
5.在主路由用snarkback显示选择的那项
既然我们正在启动选择路由并等待结果，我们将要对所返回的信息做些什么！
在这种情况下，我们将显示一个显示结果的Snackbar。为此，我们将在SelectionButton中修改_navigateAndDisplaySelection方法。
_navigateAndDisplaySelection(BuildContext context) async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SelectionScreen()),
);
// After the Selection Screen returns a result, hide any previous snackbars
// and show the new result!
Scaffold.of(context)
..removeCurrentSnackBar()
..showSnackBar(SnackBar(content: Text("$result")));
}
完整例子
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Returning Data',
home: HomeScreen(),
));
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Returning Data Demo'),
),
body: Center(child: SelectionButton()),
);
}
}
class SelectionButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
_navigateAndDisplaySelection(context);
},
child: Text('Pick an option, any option!'),
);
}
// A method that launches the SelectionScreen and awaits the result from
// Navigator.pop!
_navigateAndDisplaySelection(BuildContext context) async {
// Navigator.push returns a Future that will complete after we call
// Navigator.pop on the Selection Screen!
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SelectionScreen()),
);
// After the Selection Screen returns a result, hide any previous snackbars
// and show the new result!
Scaffold.of(context)
..removeCurrentSnackBar()
..showSnackBar(SnackBar(content: Text("$result")));
}
}
class SelectionScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Pick an option'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: () {
// Close the screen and return "Yep!" as the result
Navigator.pop(context, 'Yep!');
},
child: Text('Yep!'),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: () {
// Close the screen and return "Nope!" as the result
Navigator.pop(context, 'Nope.');
},
child: Text('Nope.'),
),
)
],
),
),
);
}
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- php – Laravel：如何使用尾部斜杠创建路由路由返回URL？
- c# – 仅为路由公开.NET OData API的子集(对于排除的API,返回404)
- C# 永远不会返回的方法真的不会返回
- iOS之导航返回上上个控制器或指定返回某个控制器
- MyBatis返回Map
- c++ 为什么在返回从函数的返回类型派生的类型的本地对象时,没有选择move构造函数？
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
