Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >flutter 中的ModalRoute 传值

flutter 中的ModalRoute 传值

原创
作者头像
徐建国
修改于 2021-08-27 07:11:16
修改于 2021-08-27 07:11:16
1.8K00
代码可运行
举报
文章被收录于专栏:个人路线个人路线
运行总次数:0
代码可运行

ModalRoute 传值 - 基础路由传值

MaterialPageRoute 的构造参数中 可以看到 RouteSettings: settings 这个参数

RouteSettings 构造函数如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  const RouteSettings({
    this.name,
    this.isInitialRoute = false,
    this.arguments,
  });

其实 RouteSettings 就是路由的基本信息,arguments 可以用来存储路由相关的参数字段:

下面是一个基本的路由跳转,页面 Widget 构造函数不接受参合参数,但是路由的 settings 中配置了一个对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Navigator.of(context).push(
  new MaterialPageRoute(
    builder: (context) {
      return NewRouteWidget();
    },
    settings: RouteSettings(
      arguments: {'name': 'postbird'},
    ), // 传参
    fullscreenDialog: true,
  ),
);

NewRouteWidget Widget 中想要拿到配置的 arguments 可以通过 ModalRoute 来拿

ModalRoute 构造如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  /// Creates a route that blocks interaction with previous routes.
  ModalRoute({
    RouteSettings settings,
  }) : super(settings: settings);

所以整个新页面 Widget 使用如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 新路由页面
class NewRouteWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Map args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
        appBar: AppBar(title: Text('获取参数')),
        body: Center(
            child: Column(
          children: <Widget>[
            Text(args.toString()),
            FlatButton(
              child: Text('pop'),
              onPressed: () {
                Navigator.pop(context);
              },
            )
          ],
        )));
  }
}

效果:

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
《Flutter》-- 9.路由与导航
Flutter的路由管理和导航借鉴了前端和客户端中的设计思路,提供了Route和Navigator对路由进行统一管理。
爱学习的程序媛
2022/04/07
1.1K0
《Flutter》-- 9.路由与导航
Flutter | 路由管理
MaterialPageRoute 是 Material 组件库提供的组件,他可以针对不同的平台,实现与平台页面切换动画风格一致切换动画
345
2022/02/11
8710
Flutter | 路由管理
Flutter路由管理和页面参数的传递(获取&返回)
在做 Flutter 开发的时候所有的页面以及页面上的元素都变成了 Widget ,创建一个页面或者视图直接 new 一个新的 widget 就可以,相关的参数我们可以直接通过构造函数直接传递。
静默加载
2020/05/29
4.8K0
flutter系列之:Navigator的高级用法
上篇文章我们讲到了flutter中navigator的基本用法,我们可以使用它的push和pop方法来进行Router之间的跳转。
程序那些事
2023/02/27
9260
Flutter | 路由管理
MaterialPageRoute 是 Material 组件库提供的组件,他可以针对不同的平台,实现与平台页面切换动画风格一致切换动画
345
2022/02/15
9730
Flutter | 路由管理
Flutter中的基本路由、命名路由、替换路由,返回到根路由
Flutter中的路由,通俗地讲就是页面跳转。在Flutter中通过 Navigator 组件管理路由导航。
拉维
2019/08/19
9.3K1
Flutter中的基本路由、命名路由、替换路由,返回到根路由
12.Flutter学习之路由即Android上的页面跳转
Flutter中的路由通俗来讲就是页面跳转,在Flutter中通过Navigator组件管理路由导航。并且提供了管理堆栈的方法,如:Navigator.push和Navigator.pop Flutter提供了两种配置路由跳转的方式:1、基本路由 2、命名路由
易帜
2022/02/09
1.3K0
12.Flutter学习之路由即Android上的页面跳转
Flutter 系列之路由学习
Navigator 是 Flutter 中用于管理路由的组件,它维护着一个路由堆栈。页面可以被推入堆栈(push),也可以被弹出堆栈(pop)。
心安事随
2024/11/28
1630
Flutter开发(15)- 路由导航
我们通常会用屏(Screen)来称呼一个页面(Page),一个完整的App应该是有多个Page组成的。
前端小tips
2021/12/07
1K0
Flutter开发(15)- 路由导航
『Flutter』跨页面传参
经过上一章节的介绍,给大家详细介绍了命名路由相关的知识,本章节将给大家介绍如何在跨页面传参。
杨不易呀
2024/01/23
5281
『Flutter』跨页面传参
【Flutter 专题】110 页面间小跳转 (四)
和尚计划针对页面间跳转的路由相关知识做一个汇总,发现有两类特殊方法暂未研究,今天特补充 Navigator 相关方法应用;
阿策小和尚
2021/01/27
4580
【Flutter 专题】110 页面间小跳转 (四)
Flutter开发-路由
一个route是一个屏幕或页面的抽象,Navigator是管理route的Widget。
码客说
2020/05/14
8140
Flutter配置路由组件抽离及页面传参
在lib目录下新建个routes文件夹,里面新建个Routes.dart文件来统一管理我们的路由跳转及传参, 在这里我们就以Home.dart文件跳转到Search.dart文件并传参为例
明知山
2020/09/03
1.2K0
深入探究Flutter中的页面导航器:Navigator详解
在移动应用开发中,导航器(Navigator)是一个至关重要的组件,它负责管理应用程序中各个页面之间的导航和转换。在Flutter中,Navigator扮演着非常重要的角色,它允许我们在应用程序中进行页面的跳转、返回以及传递参数等操作,为用户提供了流畅、高效的导航体验。
繁依Fanyi
2024/04/02
1.5K0
Flutter 中路由返回的多种方式
当页面中跳转顺序是A页面-B页面-C页面,如果在B页面中使用上面这个命令跳转到C页面,在C页面返回时会直接跳转到A页面。如果在A页面也是使用的此命令跳转到B页面,那么在C页面中返回时会返回A页面的上一级页面。
越陌度阡
2020/12/29
2.4K0
Flutter 路由参数传递及接收
Navigator 导航器的 push 和 pop 方法可以携带参数在页面间传递,其他变形的方法也一样。pushNamed 方法原型如下:
用户7043603
2022/02/24
1.3K0
【Flutter 实战】路由堆栈详解
假设现在有2个页面 A 和 B,A中有一个按钮,点击跳转到 B 页面,A 页面代码:
老孟Flutter
2020/09/22
1.5K0
【Flutter 实战】路由堆栈详解
Flutter中命名路由模块化及传参
上面的代码中分别引入了三个页面:Form.dart 和 Search.dart 以及 Tabs.dart。
越陌度阡
2020/12/28
1.6K0
再谈路由与导航,详谈Flutter是如何实现页面切换的
如果说 UI 框架的视图元素的基本单位是组件,那应用程序的基本单位就是页面了。对于拥有多个页面的应用程序而言,如何从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理页面之间的跳转,通常被称为路由管理或导航管理。
拉维
2019/08/22
2.8K0
再谈路由与导航,详谈Flutter是如何实现页面切换的
flutter路由
看完本文你将学会路由的使用、管理好一个路由、路由传参、路由带参返回、路由记录、返回到指定路由、路由动画, 然后使用pop操作来进行回退到某个路由;
用户1974410
2022/09/20
1.7K0
flutter路由
相关推荐
《Flutter》-- 9.路由与导航
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验