Flutter Navigator.popUntil 参数传递

Flutter 使用页面传参

以下是 在flutter 中页面传参的常用形式,都可以有有直接的传值参数提供。

  • Navigator.push #跳转到指定页面 压栈路由表
  • Navigator.pushReplacement #关闭当前页面 跳转到指定页面压栈路由表
  • Navigator.pushAndRemoveUntil #关闭所有页面,清空路由表 跳转到指定页面压栈路由表,那么当前页面就是 路由表的第一个(只有当前这个页面)
  • Navigator.pop #关闭当前页面 出栈路由表(移除当前路由表)

Navigator.popUntil 函数可以是我们 跳回到指定页面,并且出栈掉中间的页面,但是这个函数 并没有直接可以使用的传递参数的位置。这个经过查阅资料 找到一种方案可以 跨多个页面传递参数:参考地址
Navigator.popUntil 传递参数https://medium.com/@naikraveena40/how-to-return-data-when-using-popuntil-31b62d93f4aa

第一步:

在跳转到需要接收 参数的页面的时候,跳转参数先配置下,这样可以记录在路由表中相应的字段中,否则再给这个字段(route.settings.arguments)赋值的时候 会为 null,不能进行赋值;

比如我这里是实际是是一个订单的列表:

因为订单详情中(可以有多个页面跳转), 多个页面 均可以对订单进行状态的修改,为了解决频繁刷新的不友好, 再返回在订单列表中如果对订单状态进行了更改 则更新对应的状态,

这里对跳转到订单页面的函数做参数的改造:

AppNavigator 为了方便自己封装的路由方法;功能类似于 Navigator.push

复制代码
# AppNavigator 为了方便自己封装的路由方法;功能类似于 Navigator.push

# PageOrderList 订单列表本身不需要传递参数

///之前的  不用传递参数
AppNavigator().navigateTo(const PageOrderList());


///现在为了拿到 Navigator.popUntil 返回来的参数,这里要传递个 数据
AppNavigator().navigateTo(const PageOrderList(), arguments: {
  'result': {},
});
第二步:

然后我们再 需要接收参数的页面(我这里就是这个订单列表)

复制代码
///跳转到退货退款页面  应为这个页面还会跳转到填写订单物流页面,提交更改,
Map? map = await AppNavigator().navigateTo(
  PageDrawbackDetail(
    orderInfo: _datum,
  ),
);

///普通 Navigator.pop 返回当前页面 的接收返回参数的方式
if (map != null && map.isNotEmpty) {
  setState(() {
    _datum = map;
  });
}


///使用 Navigator.popUntil 返回当前页面 的接收返回参数的方式
if (ModalRoute.of(context)?.settings.arguments != null) {
  final arguments =
      ModalRoute.of(context)?.settings.arguments as Map;
  final result = arguments['result'];
  print('填写快递信息 result $result');
  if (result != null) {
    setState(() {
      _datum = result;
    });
  }
}
第三步:
复制代码
Navigator.popUntil 函数的处理,就是对路由表中的字段进行赋值,因为这个 route.settings.arguments 字段默认是一个null(不提前赋值是没办法 复制的应为是一个null),并且是个 final类型,所有只能通过 引用类型的方式给他赋值,
复制代码
navigateBackTo(BuildContext context, String pageName, {Object? arguments}) {
  Navigator.popUntil(context, (route) {
    if (route.settings.name == pageName) {
      if (arguments != null && route.settings.arguments != null) {
        (route.settings.arguments as Map)['result'] = arguments;
      }
      return true;
    }
    return false;
  });
}

经过上面的操作你就可以顺利拿到 通过 Navigator.popUntil 返回页面的参数

复制代码
相关推荐
264玫瑰资源库2 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端13 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED19 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪41 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚2 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑