内容简介:在某些情况下,我们可能希望从新路由返回数据。例如,假设我们我们怎样才能做到这一点?使用
在某些情况下,我们可能希望从新路由返回数据。例如,假设我们 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构造函数?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Book of CSS3
Peter Gasston / No Starch Press / 2011-5-13 / USD 34.95
CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical la......一起来看看 《The Book of CSS3》 这本书的介绍吧!