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 相关文章推荐
Java Shutdown Hook场景使用及源码分析
Jun 15 Java/Android
Java并发编程之详解CyclicBarrier线程同步
Jun 23 Java/Android
详解Java实现数据结构之并查集
Jun 23 Java/Android
springcloud之Feign超时问题的解决
Jun 24 Java/Android
SpringBoot实现异步事件驱动的方法
Jun 28 Java/Android
浅谈自定义校验注解ConstraintValidator
Jun 30 Java/Android
SpringBoot SpringEL表达式的使用
Jul 25 Java/Android
SpringBoot实现quartz定时任务可视化管理功能
Aug 30 Java/Android
java如何实现socket连接方法封装
Sep 25 Java/Android
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
Mar 21 Java/Android
Spring Boot接口定义和全局异常统一处理
Apr 20 Java/Android
Java线程的6种状态与生命周期
May 11 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
使用数据库保存session的方法
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python中set()函数简介及实例解析
2018/01/09 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Python 列表反转显示的四种方法
2020/11/16 Python
python中reload重载实例用法
2020/12/15 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
高中生自我评语大全
2014/01/19 职场文书
函授药学自我鉴定
2014/02/07 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
党支部审查意见
2015/06/02 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript