前言
上一篇通过静态路由以及动态路由了解了,在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,“湖北加油”)的第二个参数传递,其他的代码基本前面都用过,这里就不在赘述了,实现的效果与该博文开始的图片一摸一样。