Flutter(二十四)——参数回传

前言

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