flutter-頁面跳轉並返回數據

頁面跳轉后，當我們返回頁面時返回結果到上一個頁面（也就是父頁面）。比如，我們去子頁面選擇了一項選項，然后把選擇的結果返回給父級頁面。

Dart中的異步請求和等待和ES6中的方法很像，直接使用async...await就可以實現。比如下面寫了一個跳轉目標頁面的方法，然后進行跳轉，注意這時候是異步的。等待結果回來之后，我們再顯示出來內容。async啟用異步方法，await等待。具體代碼如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '頁面跳轉並返回數據',
    home: FirstPage(),
  ));
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第一個頁面，即上一級頁面'),
      ),
      body: Center(
        child: RouteButton()
      ),
    );
  }
}

class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        _navigatorToTargetPage(context);
      },
      child: Text('跳轉到目標頁面'),
    );
  }

  _navigatorToTargetPage(BuildContext context) async {
    final result = await Navigator.push(
        context, MaterialPageRoute(builder: (context) => TargetPage()));

    Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result')));
  }
}

class TargetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是目標頁面'),
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
              child: Text('參數1'),
              onPressed: () {
                Navigator.pop(context, '返回的參數1');
              }
            ),
            RaisedButton(
              child: Text('參數2'),
              onPressed: () {
                Navigator.pop(context, '返回的參數2');
              }
            ),
          ],
        ),
      ),
    );
  }
}