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,“湖北加油”)的第二個參數傳遞，其他的代碼基本前面都用過，這裏就不在贅述了，實現的效果與該博文開始的圖片一摸一樣。