說明

在APP中存在有很多個介面，我們需要將值由一個介面傳入另外一個介面。這種情況就是指路由傳參。

對於路由傳參，需要在接收的介面中定義一個接收傳遞值的變數

class MyHomePage extends StatefulWidget {
  // 類的構造器，用來接收傳遞的值
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;   // 用來儲存傳遞過來的值

  @override
  _MyHomePageState createState() => new _MyHomePageState
 
();
}

傳入值的方式

new MyHomePage(title: '帶引數跳轉')

接收返回值的方式

 onPressed: () {
  Navigator.push<String>(context,
      new MaterialPageRoute(builder: (BuildContext context) {
    return new ThirdPage(title: "請輸入暱稱");   /// 跳轉到第三頁，並且傳遞引數過去
    })).then((String result) {

    // 接收返回值的邏輯處理，通過一個 Dialog 展示出來
    showDialog
 
(
        context: context,
        builder: (BuildContext context) {
          return new AlertDialog(
            content: new Text("您輸入的暱稱為:$result"),
          );
        });
  });
},

圖示

完整例項程式碼

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

/// 作為整個介面的容器
class MyApp
 
 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '路由專遞引數',
      theme: new ThemeData( primarySwatch: Colors.blue, ),
      home: new MyHomePage(title: '帶引數跳轉'),
      // 路由表設定
      routes: <String, WidgetBuilder> {
        "/nameRoute": (BuildContext context) => new SecondPage(),
      },
    );
  }
}

/// 新建一個介面
class MyHomePage extends StatefulWidget {
  // 類的構造器，用來接收傳遞的值
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;   // 用來儲存傳遞過來的值

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar( title: new Text( widget.title ), ),
      body: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new FlatButton(
                onPressed: () {
                  // 路由跳轉到第二頁
                  Navigator.pushNamed(context, "/nameRoute");
                },
                child: new Text("直接使用name跳轉")),

            new FlatButton(
                onPressed: () {
                  Navigator.push<String>(context,
                      new MaterialPageRoute(builder: (BuildContext context) {
                    return new ThirdPage(title: "請輸入暱稱");   /// 跳轉到第三頁，並且傳遞引數過去
                    })).then((String result) {

                    // 接收返回值的邏輯處理，通過一個 Dialog 展示出來
                    showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return new AlertDialog(
                            content: new Text("您輸入的暱稱為:$result"),
                          );
                        });
                  });
                },
                child: new Text("跳轉傳參並返回值")),
          ],
        ),
      ),
    );
  }
}

/// 第二個介面
/// 僅僅用於展示出介面
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("第二頁"),
      ),
      body: new Center(
        child: new FlatButton(
            onPressed: () {
              // 點選的時候，返回到上一個頁面中
              Navigator.pop(context);
            },
            child: new Text("返回")),
      ),
    );
  }
}

/// 第三個介面
class ThirdPage extends StatefulWidget {
  final String title;   // 儲存傳遞過來的引數
  ThirdPage({this.title});  // 本頁面的構造器，接收傳遞過來的引數

  @override
  State<StatefulWidget> createState() {
    return new _ThirdPageState();
  }
}

class _ThirdPageState extends State<ThirdPage> {
  TextEditingController controller;

  @override
  void initState() {
    controller = new TextEditingController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Column(
        children: <Widget>[

          // 文字輸入框
          new TextField(
            decoration: new InputDecoration(labelText: "請輸入暱稱"),
            controller: controller,
          ),

          // 確認按鈕
          new RaisedButton(
              color: Colors.blueAccent,
              onPressed: () {
                // 點選確認按鈕

                if (controller.text == '') {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) => new AlertDialog(title: new Text("請輸入暱稱") ));
                  return;
                }

                // 將輸入的內容返回
                Navigator.pop(context, controller.text);
              },
              child: new Text("確認"))
        ],
      ),
    );
  }
}