专栏首页个人路线flutter 中的ModalRoute 传值
原创

flutter 中的ModalRoute 传值

ModalRoute 传值 - 基础路由传值

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

RouteSettings 构造函数如下:

  const RouteSettings({
    this.name,
    this.isInitialRoute = false,
    this.arguments,
  });

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

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

Navigator.of(context).push(
  new MaterialPageRoute(
    builder: (context) {
      return NewRouteWidget();
    },
    settings: RouteSettings(
      arguments: {'name': 'postbird'},
    ), // 传参
    fullscreenDialog: true,
  ),
);

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

ModalRoute 构造如下:

  /// Creates a route that blocks interaction with previous routes.
  ModalRoute({
    RouteSettings settings,
  }) : super(settings: settings);

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

// 新路由页面
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);
              },
            )
          ],
        )));
  }
}

效果:

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter路由管理和页面参数的传递(获取&返回)

    在做 Flutter 开发的时候所有的页面以及页面上的元素都变成了 Widget ,创建一个页面或者视图直接 new 一个新的 widget 就可以,相关的参数...

    静默加载
  • Flutter 1.17 中的导航解密和性能提升

    Flutter 1.17 对比上一个稳定版本,更多是带来了性能上的提升,其中一个关键的优化点就是 Navigator 的内部逻辑,本篇将带你解密 Navigat...

    GSYTech
  • 从零开始的Flutter之旅: Navigator

    这篇文章是从零开始系列的第五期,前面我们讲到了Widget与结合数据共享的Provider处理。

    Rouse
  • Flutter(五)--Navigator&页面传值Flutter(五)--Navigator&页面传值

    用户8893176
  • Java中的按值传递

    这个时候可能会有疑问了,为什么add方法可以修改List数组,但是append和addNum却没有修改传进来的值

    俺也想起舞
  • 一篇看懂Android与Flutter之间的通信

    Flutter作为一种跨平台解决方案,经常会作为一个模块嵌入到原生Android与iOS应用中,Flutter与Android原生端的通信必不可少。所以本文就来...

    Android技术干货分享
  • JAVA中的值传递和引用传递

    先来看一个作为程序员都熟悉的值传递的例子: ... ... //定义了一个改变参数值的函数 public static void changeValue(int...

    小柒2012
  • flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候)

    通常可以通过设置构造函数,传递对应参数到制定的widget树中,如下面代码所描述:

    砸漏
  • Flutter 如何混编原生功能

    依托于与 Skia 的深度定制及优化,Flutter 给我们提供了很多关于渲染的控制和支持,能够实现绝对的跨平台应用层渲染一致性。但对于一个应用而言,除了应用层...

    展菲
  • 5分钟搞定Flutter与Android 的交互(内附大量Flutter学习资源)

    Flutter 说到底只是一个 UI 框架,很多功能都需要通过原生的 Api 来实现,那么就会涉及到 Flutter 和 Native 的交互,因为本人不懂 i...

    陈宇明
  • Flutter Chanel通信流程

    杨充
  • Flutter实战:手把手教你写Flutter Plugin

    如果你对移动端有所关注,那么你一定会听说过Flutter。得益于Google,Flutter一经推出便得受到了广泛关注。很多开发者跃跃欲试,国内部分大厂,诸如美...

    JarvanMo
  • Flutter Dojo设计之道——骚气的闪屏动画是如何实现的

    Flutter Dojo的闪屏动画,参考了著名大厂——P站的App闪屏,相信大家应该都不陌生。

    用户1907613
  • 【Flutter 专题】49 图解 Flutter 与 Android 原生交互

    和尚上一篇简单学习了一下 Android 原生接入 Flutter Module,现在学习一下两者之间的数据交互;

    阿策小和尚
  • 【Flutter 专题】78 图解 Android Native 集成 FlutterBoost 小尝试 (一)

    和尚前几天刚将历史项目升级至 AndroidX 并接入 Flitter Module,接下来和尚准备采用 flutter_boost 进行 Nati...

    阿策小和尚
  • Flutter如何和Native通信-Android视角

    我们都知道Flutter开发的app是可以同时在iOS和Android系统上运行的。显然Flutter需要有和Native通信的能力。比如说,你的Flutter...

    HowHardCanItBe
  • Flutter “跳转页面”(二)前言正文

    写了这么多文章,有翻译文档的,有自己理解的,也不知道到底是怎么样的风格更能让人接受,希望大家能给点意见或建议。

    坑吭吭
  • Flutter路由跳转及参数传递

    做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过star...

    吴老师
  • 【Flutter】372- Flutter移动端实战手册

    Flutter又双叒叕来了!本周推送是我们Flutter系列文章的最终篇!《Flutter移动端实战手册》回归实际应用场景,详细讲述Flutter在移动端的应用...

    pingan8787

扫码关注云+社区

领取腾讯云代金券