Flutter学习之路由传参_flutter有状态组件怎么使用路由接参

说明

在APP中存在有很多个界面，我们需要将值由一个界面传入另外一个界面。这种情况就是指路由传参。

对于路由传参，需要在接收的界面中定义一个接收传递值的变量

class MyHomePage extends StatefulWidget {
  // 类的构造器，用来接收传递的值
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;   // 用来储存传递过来的值

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
1
2
3
4
5
6
7
8

传入值的方式

new MyHomePage(title: '带参数跳转')
1

接收返回值的方式

 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"),
          );
        });
  });
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

图示

完整实例代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150