内容简介:在某些情况下,我们可能希望从新路由返回数据。例如,假设我们我们怎样才能做到这一点?使用
在某些情况下,我们可能希望从新路由返回数据。例如,假设我们 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.'),
),
)
],
),
),
);
}
}
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
企业IT架构转型之道:阿里巴巴中台战略思想与架构实战
钟华 / 机械工业出版社 / 2017-4-1 / 79
在当今整个中国社会都处于互联网转型的浪潮中,不管是政府职能单位、业务规模庞大的央企,还是面临最激烈竞争的零售行业都处于一个重要的转折点,这个转折对企业业务模式带来了冲击,当然也给企业的信息中心部门带来了挑战:如何构建IT系统架构更好地满足互联网时代下企业业务发展的需要。阿里巴巴的共享服务理念以及企业级互联网架构建设的思路,给这些企业带来了不少新的思路,这也是我最终决定写这本书的最主要原因。本书从阿......一起来看看 《企业IT架构转型之道:阿里巴巴中台战略思想与架构实战》 这本书的介绍吧!