内容简介:在某些情况下,我们可能希望从新路由返回数据。例如,假设我们我们怎样才能做到这一点?使用
在某些情况下,我们可能希望从新路由返回数据。例如,假设我们 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构造函数?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
python学习手册(原书第5版)
马克·卢茨 / 机械工业出版社 / 2018-10 / 219
如果你想动手编写高效、高质量并且很容易与其他语言和工具集成的代码,本书将快速地帮助你利用Python提高效率。本书基于Python专家的流程培训课程编写,内容通俗易懂。本书包含很多注释的例子和插图,以帮助你开始使用Python2.7和3.3。每章都包含关于Python语言的重要组成部分的一节课。本书主要内容:了解Python的主要内置对象类型,如数字、列表和字典;创建和处理对象的Python语句,......一起来看看 《python学习手册(原书第5版)》 这本书的介绍吧!