前言
上一篇通过静态路由以及动态路由了解了,在Flutter开发中界面的跳转,但在实际的项目中,并不仅仅只有跳转这么一种需求,还有回传参数。(下图为本文实现最终效果图)
比如在某些悬浮窗口中选择城市,然后返回地址等等,都具有回传参数的需求,那么在Flutter开发中,要怎么实现这么一种需求呢?不妨我们来做一个城市参数回传的例子。
主页面
首先,就是我们App的主页面设计,肯定有跳转到选择城市界面的功能,所以代码应该是这个样子的:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("主页面"),
),
body: Center(
child: JumpButton()
),
);
}
}
class JumpButton extends StatelessWidget{
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: (){
_showCityResult(context);
},
child: Text("选择城市:",style: TextStyle(fontSize: 33,color: Colors.red),),
);
}
/***
* 跳转页面并返回数据显示
*/
_showCityResult(BuildContext context) async{
final result=await Navigator.push(context, MaterialPageRoute(builder: (context)=>CityPage()));//跳转界面获取返回数据
Scaffold.of(context)..removeCurrentSnackBar()..showSnackBar(SnackBar(content: Text("$result"),));//显示返回数据
}
}
需要说明一点的是,返回数据需要等待界面操作完成之后,也属于异步的操作,所以需要用到async以及await ,代码很简单,主界面就是一个按钮,然后点击按钮,跳转界面,返回数据,并显示在SnackBar上,SnackBar控件在Java开发Android程序中也有,就不多做讲解了。
跳转界面
接着,就需要实现我们的跳转界面,我们先来看看其代码:
class CityPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("选择城市"),),
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10),
child: RaisedButton(
child: Text("武汉加油"),
onPressed: (){
Navigator.pop(context,"武汉加油");
},
),
),
Padding(
padding: const EdgeInsets.all(10),
child: RaisedButton(
child: Text("湖北加油"),
onPressed: (){
Navigator.pop(context,"湖北加油");
},
),
),
Padding(
padding: const EdgeInsets.all(10),
child: RaisedButton(
child: Text("中国加油"),
onPressed: (){
Navigator.pop(context,"中国加油");
},
),
),
],
),
);
}
}
这个界面给了三个选项,分别是武汉加油,湖北加油,中国加油,然后通过点击按钮返回到上一个界面,传递参数通过Navigator.pop(context,“湖北加油”)的第二个参数传递,其他的代码基本前面都用过,这里就不在赘述了,实现的效果与该博文开始的图片一摸一样。