Flutter Navigator 实现路由传递参数


Posted in Java/Android onApril 22, 2022

Flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由。

一、命名路由传参

应用入口处定义路由表

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 隐藏预览中的debug
      title: 'Flutter Demo',
      routes: {
        '/': (context) => const HomePage(),
        "menu": (context) => const MenuPage()
      },
    );
  }
}
// 定义HomePage
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("登录"),
      ),
      body: ElevatedButton(
        onPressed: () async {
          // 实现路由跳转
          var result = await Navigator.pushNamed(context, 'menu',
              arguments: {'name': 'title'});
          print(result);
        },
        child: const Text('登录'),
      ),
    );
  }
}
// 定义MenuPage
class MenuPage extends StatelessWidget {
  const MenuPage({Key? key}) : super(key: key);
  @override
  // 接收传参
  Widget build(BuildContext context) {
    dynamic argumentsData = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text('菜单' + argumentsData.toString()),
      ),
      body: ElevatedButton(
        onPressed: () {
          Navigator.pop(context, {'name': "Navigator.pop传参"});
        },
        child: const Text("返回"),
      ),
    );
  }
}

二、构建路由传参

从HomePage页面跳转MenuPage页面时,携带参数

第一种方式:

// 定义HomePage
class HomePage extends StatelessWidget {
  const HomePage ({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("登录"),
      ),
      body: ElevatedButton(
        onPressed: () {
          // 实现路由跳转
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const MenuPage(
                title: '菜单123',
              ), // 需要跳转的页面
            ), // 修改路由的名称、信息等
          );
        },
        child: const Text('登录'),
      ),
    );
  }
}
// 定义MenuPage
class MenuPage extends StatelessWidget {
  // 定义接收的字段
  final String title;
  const MenuPage({Key? key, required this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ElevatedButton(
        onPressed: () {
          Navigator.pop(context);
        },
        child: const Text("返回"),
      ),
    );
  }
}

第二种方式:

// 定义HomePage
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("登录"),
      ),
      body: ElevatedButton(
        onPressed: () {
          // 实现路由跳转
          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => const MenuPage(),
                // 修改路由的名称、信息等
                settings: const RouteSettings(
                    name: '菜单', arguments: {"name": '123'}) // 需要跳转的页面
                ),
          );
        },
        child: const Text('登录'),
      ),
    );
  }
}
// 定义MenuPage
class MenuPage extends StatelessWidget {
  const MenuPage({Key? key}) : super(key: key);
  @override
  // 接收传参
  Widget build(BuildContext context) {
    dynamic argumentsData = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text('菜单' + argumentsData.toString()),
      ),
      body: ElevatedButton(
        onPressed: () {
          Navigator.pop(context);
        },
        child: const Text("返回"),
      ),
    );
  }
}

从MenuPage页面返回HomePage页面时,携带参数

// 定义HomePage
class HomePage extends StatelessWidget {
  const HomePage ({Key? key}) : super(key: key);;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("登录"),
      ),
      body: ElevatedButton(
        onPressed: () async {
          // 实现路由跳转
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const MenuPage(),
            ),
          );
          print(result);
        },
        child: const Text('登录'),
      ),
    );
  }
}
// 定义MenuPage
class MenuPage extends StatelessWidget {
  const MenuPage({Key? key}) : super(key: key);
  @override
  // 接收传参
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('菜单'),
      ),
      body: ElevatedButton(
        onPressed: () {
          Navigator.pop(context, {'name': "Navigator.pop传参"});
        },
        child: const Text("返回"),
      ),
    );
  }
}

到此这篇关于Flutter Navigator路由传参的实现的文章就介绍到这了!


Tags in this post...

Java/Android 相关文章推荐
SpringBoot2 参数管理实践之入参出参与校验的方式
Jun 16 Java/Android
详解SpringBoot异常处理流程及原理
Jun 21 Java/Android
Java SSH 秘钥连接mysql数据库的方法
Jun 28 Java/Android
一篇文章带你学习Mybatis-Plus(新手入门)
Aug 02 Java/Android
Java 在线考试云平台的实现
Nov 23 Java/Android
Java字符串逆序方法详情
Mar 21 Java/Android
Mybatis-Plus 使用 @TableField 自动填充日期
Apr 26 Java/Android
Java存储没有重复元素的数组
Apr 29 Java/Android
Android studio 简单计算器的编写
May 20 Java/Android
Java中的Kotlin 内部类原理
Jun 16 Java/Android
Android RecyclerView实现九宫格效果
Jun 28 Java/Android
Java实现字符串转为驼峰格式的方法详解
Jul 07 Java/Android
SpringBoot 集成短信和邮件 以阿里云短信服务为例
Java设计模式之代理模式
Apr 22 #Java/Android
Java工作中实用的代码优化技巧分享
Apr 21 #Java/Android
Spring Boot接口定义和全局异常统一处理
Apr 20 #Java/Android
Spring Boot配合PageHelper优化大表查询数据分页
Java Spring Boot 正确读取配置文件中的属性的值
Elasticsearch Recovery 详细介绍
Apr 19 #Java/Android
You might like
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
django+echart数据动态显示的例子
2019/08/12 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python如何输出整数
2020/06/07 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
同学会邀请书大全
2014/01/12 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
小学生思想品德评语
2014/12/31 职场文书
小学科学教学计划
2015/01/21 职场文书
毕业论文致谢词
2015/05/14 职场文书
超强台风观后感
2015/06/09 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
Javascript设计模式之原型模式详细
2021/10/05 Javascript
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android