【自学Flutter】28.2 命名路由的使用及路由参数的传递

最新推荐文章于 2025-08-01 11:25:14 发布

原创最新推荐文章于 2025-08-01 11:25:14 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Android

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文详细介绍了在Flutter中如何使用命名路由进行页面跳转，并演示了如何在页面间传递参数。通过具体代码实例，展示了从一个页面跳转到另一个页面，并在跳转过程中传递数据，以及如何在目标页面接收这些数据。

28.2 命名路由的使用及路由参数的传递

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  String result = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        routes: {
          "second":(context) => Second()
        },
        home: Scaffold(
            appBar: AppBar(title: Text("路由的跳转"),),
            body: Center(
                child: Column(
                  children: <Widget>[
                    Builder(builder: (context){
                      return RaisedButton(
                          child: Text('打开第二个页面'),
                          onPressed: (){
                            Navigator.pushNamed(
                                context,"second",
                                arguments: "我是第一个页面的文本").then((e){
                                  setState(() {
                                    result = e;
                                  });
                                }
                            );
                          }
                      );
                    },
                    ),
                    Text(result)
                  ],
                )
            )
        )
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
                child: Text('返回上个页面'),
                onPressed: () {
                  Navigator.pop(context,"我是返回给第一个页面的文本");
                }
            ),
            Text( ModalRoute.of(context).settings.arguments)
          ],
        )
      ),
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  //保存pop返回值，以显示文本
  String result = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        //注册路由，根据名字跳转
        routes: {
          "second":(context) => Second()
        },
        home: Scaffold(
            appBar: AppBar(title: Text("路由的跳转"),),
            body: Center(
                child: Column(
                  children: <Widget>[
                    Builder(builder: (context){
                      return RaisedButton(
                          child: Text('打开第二个页面'),
                          onPressed: (){
                            Navigator.pushNamed(
                                context,"second",
                                //传参数过去 arguments  获取pop返回的值 then() 
                                arguments: "我是第一个页面的文本").then((e){
                                  setState(() {
                                    result = e;
                                  });
                                }
                            );
                          }
                      );
                    },
                    ),
                    Text(result)
                  ],
                )
            )
        )
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
                child: Text('返回上个页面'),
                onPressed: () {
                  //关闭页面并返回数据给上一个页面
                  Navigator.pop(context,"我是返回给第一个页面的文本");
                }
            ),
            //获取pushName传过来的值
            Text( ModalRoute.of(context).settings.arguments)
          ],
        )
      ),
    );
  }
}

3.效果图

在这里插入图片描述