美文网首页Flutter
[Flutter] 页面路由跳转的传参

[Flutter] 页面路由跳转的传参

作者: BudSwift | 来源:发表于2020-08-08 18:05 被阅读0次

1. push 新页面传参

在进行页面路由跳转时可以携带参数,这样在下一个 widget 构建时可以从上下文 context 中解析这些参数,带参数跳转的示例如下:

Navigator.pushNamed(
    context,
     '/detail', 
    arguments: {'key': value'}
);

在对应新页面的 build 方法中可以进行参数的解析:

Widget build(BuildContext context) {
    Map arguments = ModalRoute.of(context).settings.arguments;
    return Text(arguments['key']);
}

2. pop 返回传参

有时候可以将一个页面当做完成特定需求的异步任务,这样 push-pop 的过程可以认为一次任务的开始和结束,Flutter 的路由 Navigator.push 的返回值就是 Future 类型,因此可以将执行 push 的函数指定为 aysnc 在其中处理回调的逻辑

onPressed: () async {
    dynamic result = Navigator.pushNamed(context, "/detail");
    if (result != null) {
        setState(() {
            this.text = result;
        };
    }
},

对应地,在 pop 事件中传入需要回调的参数。

// detail 页面完成任务后执行 pop
Navigator.pop(context, 'taskResult');

相关文章

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • vue路由传参及参数接收

    项目开发过程中经常出现,点击路由跳转页面的情况,这时候就用到了路由传参1,从a页面跳转到b页面a页面传参 b页面接...

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

  • Flutter 混合开发(Android)路由开发

    Flutter交互 原生跳Flutter页面通过路由传参 原生跳到Flutter页面,由于Flutter没有方法可...

  • [Flutter] 页面路由跳转的传参

    1. push 新页面传参 在进行页面路由跳转时可以携带参数,这样在下一个 widget 构建时可以从上下文 co...

  • Ionic3.x 中的路由导航NavController以及 路

    如果从页面A跳转到页面B并传参,有两种方法: NavController 路由跳转传参 在A.ts中的代码 B.t...

  • Flutter 路由

    flutter 路由 页面跳转 在flutter中界面就是组件Flutter 中的路由通俗的讲就是页面跳转。在 F...

  • Native和flutter相互交互

    场景:Native点击按钮跳转flutter页面并传参 Android页面 Dart页面 参照:https://w...

  • Angular2 路由传值

    在接收值得组件里面导入ActivatedRoute 路由设置页面传参 父级页面路由跳转的实现 子页面的Compon...

网友评论

    本文标题:[Flutter] 页面路由跳转的传参

    本文链接:https://www.haomeiwen.com/subject/pjihdktx.html