Flutter路由跳轉父級頁面向子頁面傳參及子頁面向父級頁面傳參

Flutter中頁面通過路由跳轉傳參主要分兩種，一種是通過push()跳轉時根據設定的參數進行傳參，另一種是通過pop()返回時進行傳參。

父級頁面向子頁面push()傳參

假設從A頁面跳到B頁面可能需要攜帶參數userName和userAge這兩個參數，那麼需要在B頁面先設置這兩個參數名；假設userName必須填而userAge非必需，那麼可以通過設置@required其爲必填選項：

class PageB extends StatefulWidget {
  @override
  final userName;
  final userAge;
  const PageB({Key key,@required this.userName,this.userAge}) : super(key: key);
  _PageBState createState() => _PageBState();
}

　　

在A頁面進行傳參：

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
  return PageB(
    userName: '滅霸',
    userAge: '18歲',
  );
})); 

　　

子頁面向父級頁面pop()傳參

pop()傳參是當頁面B返回到頁面A時，頁面A通過.then()接收：

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
  return PageB(
    userName: '滅霸',
    userAge: '18歲',
  );
})).then((userInfo){
  setState(() {
    backResult = userInfo;
  });
}); 

　　

在B頁面中直接把需要傳的參數放入pop()中即可：

String userInfo = '對不起，用戶滅霸已陣亡!';
Navigator.of(context).pop(userInfo);

　　

此時，我們已經完成了兩邊頁面之間的一個交互，看一下最終效果：

 

最後附上A、B頁面源碼

pageA頁面

import 'package:flutter/material.dart';
import 'package:test_app/page_b.dart';

class PageA extends StatefulWidget {
  @override
  _PageAState createState() => _PageAState();
}

class _PageAState extends State<PageA> {
  String backResult;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('pageA',style: TextStyle(color: Colors.white,fontSize: 20),),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            RaisedButton(
            child: Text('點擊跳轉B頁面並傳輸用戶信息'),
            onPressed: (){
              Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
                return PageB(
                  userName: '滅霸',
                  userAge: '18歲',
                );
              })).then((userInfo){
                setState(() {
                  backResult = userInfo;
                });
              });
            }),
            Text('${backResult}'),
          ],
        ),
      ),
    );
  }

}

　　

pageB頁面

import 'package:flutter/material.dart';

class PageB extends StatefulWidget {
  @override
  final userName;
  final userAge;
  const PageB({Key key,@required this.userName,this.userAge}) : super(key: key);
  _PageBState createState() => _PageBState();
}

class _PageBState extends State<PageB> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('pageB',style: TextStyle(color: Colors.white,fontSize: 20),),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            Text('用戶名字：${widget.userName}'),
            Text('用戶年齡：${widget.userAge}'),
            RaisedButton(
            child: Text('返回頁面A並通知滅霸陣亡消息'),
            onPressed: (){
              String userInfo = '對不起，用戶滅霸已陣亡!';
              Navigator.of(context).pop(userInfo);
            }),
          ],
        ),
      ),
    );
  }

}