Flutter Getx 路由 until 方法帮助你跳转指定路由

简介: 不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。我写了个 demo 今天我们就一起来看下这两个方法如何使用。

Flutter Getx 路由 until 方法帮助你跳转指定路由

原文 https://ducafecat.com/blog/getx-router-until

视频

https://www.bilibili.com/video/BV1eM4y1v7Yy/

前言

不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。

我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。

我写了个 demo 今天我们就一起来看下这两个方法如何使用。

知识点

Get.until

Get.until 是 GetX 库中一个用于导航的方法,它可以返回到指定路由,也可以返回到指定路由的前一个路由,可以在某些特定场景下使用。

具体来说,Get.until 方法的作用是返回到指定路由,其语法如下:

Get.until(predicate)

其中,predicate 是一个回调函数,用于指定返回到的路由。当 predicate 返回 true 时,停止返回操作。

以下是一个示例:

Get.until((route) => route.isFirst);

上面的代码将会返回到栈中第一个路由,即首页。

另外,如果需要返回到指定路由的前一个路由,可以使用 Get.until((route) => route.settings.name == '/second') 方法,其中 /second 是要返回到的路由名称。

需要注意的是,Get.until 方法只适用于返回路由,如果需要在当前路由之上添加一个新的路由,应该使用 Get.to 方法。

Get.offNamedUntil

Get.offNamedUntil 是 GetX 库中一个用于导航的方法,它可以将当前页面替换为新的页面,并且可以指定一个条件,当条件成立时停止替换。

具体来说,Get.offNamedUntil 方法的作用是将当前页面替换为指定的路由,并且可以指定一个条件,当条件成立时停止替换。它的语法如下:

Get.offNamedUntil(routeName, predicate)

其中,routeName 是要跳转到的路由名称,predicate 是一个回调函数,用于指定停止替换的条件。当 predicate 返回 true 时,替换操作停止。

以下是一个示例:

Get.offNamedUntil('/home', (route) => route.isFirst);

上面的代码将会将当前页面替换为 /home 路由,并且在路由栈中只保留一个页面,即首页。

这个方法适用于在某些特定的场景下,需要进行页面替换,并指定一个条件来控制替换的行为。比如在用户登录成功后,需要将当前页面替换为主页,但是需要保证登录页面不再路由栈中,可以使用 Get.offNamedUntil('/home', (route) => route.isFirst) 方法。

另外,需要注意的是,Get.offNamedUntil 方法只适用于替换路由,如果需要在当前路由之上添加一个新的路由,应该使用 Get.toNamed 方法。

代码步骤

页面关系

  • 程序启动进入 main
  • main 点击进入商品列表 product list
  • 点击商品列表进入详情页 product detail
  • 点击商品页进入订单确认支付页 order confirm
  • 支付成功进入 order done
    • 返回商品列表页
    • 返回用户首页

订单完成页

返回商品列表页

  void toProductList() {
   
   
    Get.until((route) => Get.currentRoute == RouteNames.productList);
  }

返回用户首页

  void toUserProfile() {
   
   
    Get.offNamedUntil(
      RouteNames.userProfile,
      (route) => route.isFirst,
    );
  }

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_getx_until

小结

总的来说,Get.offNamedUntilGet.until 这两个方法都是 GetX 库中用于导航的方法,它们可以在特定场景下用于页面的跳转和返回。以下是这两个方法的注意事项:

  • Get.offNamedUntil 方法只适用于替换路由,如果需要在当前路由之上添加一个新的路由,应该使用 Get.toNamed 方法。

  • Get.until 方法只适用于返回路由,如果需要在当前路由之上添加一个新的路由,应该使用 Get.to 方法。

另外,无论是使用 Get.offNamedUntil 还是 Get.until 方法,在编写 predicate 回调函数时,必须确保回调函数能够正确地返回 truefalse,否则导航操作可能会出现异常。同时,如果使用这两个方法进行页面跳转或返回时,还需要注意路由栈的变化,以确保页面的导航行为符合预期。

感谢阅读本文

如果我有什么错?请在评论中让我知道。我很乐意改进。


© 猫哥
ducafecat.com

end

相关文章
|
5月前
|
API Android开发 iOS开发
除了permission_handler插件,还有哪些方法可以实现Flutter动态申请权限?
除了permission_handler插件,还有哪些方法可以实现Flutter动态申请权限?
315 68
|
8月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
466 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
194 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10月前
|
API 网络架构
一文带你了解 Flutter 路由
一文带你了解 Flutter 路由
266 5
|
11月前
|
开发框架 前端开发 定位技术
Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证
本文深入探讨了Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证,常见插件市场的介绍,选择合适插件的策略,以及开源资源的利用价值与注意事项。通过案例分析和对社区影响的讨论,展示了这些资源如何促进开发效率和技术进步,并展望了未来的发展趋势。
228 11
|
11月前
|
缓存 前端开发 数据安全/隐私保护
Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验
在移动应用开发中,Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验。本文深入探讨了键盘的显示与隐藏、输入框的焦点管理、键盘类型的适配、输入框高度自适应、键盘遮挡问题处理及性能优化等关键技术,结合实例分析,旨在帮助开发者提升应用的用户体验。
451 6
|
11月前
|
Go 网络架构 开发者
Flutter &鸿蒙next中的路由使用详解【基础使用】
本文介绍了 Flutter 路由系统的使用方法,包括基本路由、命名路由、参数传递、返回参数和动态路由。通过 `Navigator` 类实现页面跳转,支持简单和复杂参数的传递,并可通过 `onGenerateRoute` 实现更灵活的动态路由管理。示例代码展示了如何在实际项目中应用这些技术,帮助开发者构建清晰、易于维护的导航结构。
286 1
|
12月前
|
开发者
flutter:总结所有需要用到的方法与实战 (十六)
本文介绍了Flutter中路由和顶部导航的使用方法,包括简单路由、命名路由、返回及返回根路由的实现。同时,详细讲解了顶部导航的定义与属性设置,并通过实战案例展示了复杂布局、新闻列表和页面制作的思路。最后,还提供了父类向子类传递参数的方法以及如何添加依赖库。
119 0
|
12月前
|
自然语言处理 开发者
flutter:Getx (十四)
Getx 是一个轻量级的 Flutter 库,用于状态管理和路由导航。使用 Getx 需要包裹在 `GetMaterialApp` 中。首先添加依赖 `get: ^4.6.5`,然后引入 `import 'package:get/get.dart';`。Getx 提供了 `defaultDialog`、`snackbar`、`bottomSheet` 和导航功能,支持参数传递和响应式编程(如 `Obx`)。此外,还支持国际化配置,通过 `Messages` 类定义多语言文本,并通过 `MessagesController` 控制器切换语言。
175 0
|
12月前
|
UED 开发者
flutter:获取对象&路由管理 (四)
本文介绍了Flutter中如何通过Context获取状态对象、使用GlobalKey获取状态对象、基本的路由管理、路由传值、命名路由、返回根路由以及点击图标跳转的方法。示例代码展示了如何在应用中实现这些功能,包括页面跳转、传递参数和返回上一页等操作。
154 0

热门文章

最新文章

  • 1
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    225
  • 2
    通过外部链接启动 Flutter App(详细介绍及示例)
    295
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    854
  • 4
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    468
  • 5
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    277
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    410
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    199
  • 8
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    214
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    466
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    249