Flutter学习之路由传参

说明

在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("确认"))
        ],
      ),
    );
  }
}