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

相关文章
|
3月前
|
存储 设计模式 Dart
Flutter笔记:getX库中的GetView中间件
Flutter笔记:getX库中的GetView中间件
176 0
|
3月前
|
存储 Dart 数据库
Flutter笔记:状态提升、控制器模式、GetX控制器和服务
Flutter笔记:状态提升、控制器模式、GetX控制器和服务
230 0
|
2月前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
51 2
|
2月前
|
缓存 视频直播
flutter3-dylive 基于flutter3.19+getx短视频/直播应用
基于跨端技术flutter3.19+dart3+getx实战短视频/直播应用项目。
46 4
|
2月前
|
存储 Windows
基于flutter3.22+getx手机端os系统管理FlutterOSX
flutter3-osx原创研发手机桌面式OA管理系统新解决方案模式。
56 5
|
1月前
|
Android开发
Flutter路由跳转参数处理小技巧
Flutter路由跳转参数处理小技巧
17 0
|
1月前
Flutter生命周期方法小技巧
Flutter生命周期方法小技巧
13 0
|
3月前
|
Dart Android开发 iOS开发
Flutter 弃用 WillPopScope 使用 PopScope 替代方法
了解如何在 Flutter 3.16 中将弃用的 WillPopScope 替换为 PopScope,并学习如何升级您的 Flutter 应用程序。详细指南和最佳实践,帮助您顺利迁移和更新您的导航逻辑。
158 7
Flutter 弃用 WillPopScope 使用 PopScope 替代方法
|
3月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
630 0
|
3月前
|
前端开发 开发者 iOS开发
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
【4月更文挑战第30天】本文介绍了Flutter的路由管理与页面跳转,包括基本和命名路由管理。基本路由使用`Navigator`的`push`和`pop`方法,如`MaterialPageRoute`和`CupertinoPageRoute`。命名路由则通过路由表注册名称进行跳转,如`Navigator.pushNamed`。此外,还展示了如何通过构造函数、`arguments`和`PageRouteBuilder`进行路由传值。掌握这些知识能提升Flutter开发效率。
51 0
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转