返回顶部
首页 > 资讯 > 移动开发 >Flutter 全能型选手GetX —— 路由管理
  • 778
分享到

Flutter 全能型选手GetX —— 路由管理

fluttergetx路由 2023-08-31 19:08:04 778人浏览 泡泡鱼
摘要

 使用篇   简介依赖管理路由管理状态管理主题配置多语言配置离线缓存网络请求  原理篇 从源码看Getx的依赖原理  一、Getx 路由基本使用 1、普通路由 Get.to(SecondPage())和 Get.to(() => Sec

 使用篇 

 原理篇

一、Getx 路由基本使用

1、普通路由


Get.to(SecondPage())Get.to(() => SecondPage());
这两种都可以写,但是推荐使用后者,这也是官方推荐的,因为后者将controller的生命周期和widget绑定起来。
widget被dispose后,相应的controller也会从内存中删除。
如果需要带参数的话,可以声明arguments,只需发送您想要的参数。Get在这里接受任何东西,无论是字符串、映射、列表,甚至是类实例。
Get.to(() => SecondPage(),arguments: '参数');

在你的 class 或者 controller接收

print(Get.arguments);//print out: 参数


2、命名路由

动态URL链接

Get提供高级动态URL,就像在WEB上一样。web开发人员可能已经希望在Flutter上使用此功能,并且很可能已经看到一个包承诺使用此功能并提供与Web上URL完全不同的语法,但Get也解决了这一问题。

Get.toNamed("/second")可以直接使用arguments传参,也可以直接在路由别名后面跟参数,类似于 Url get 传参的方式:

Get.toNamed("/second?name=river")

在你的 controller/bloc/stateful/stateless 类接收:

print(Get.parameters['name']);// out: river

如果使用这种命名路由的话,需要声明一个路由注册。具体声明如下代码所示:

class Routers {  static const second = '/second';  static List getPages = [    GetPage(name: second, page: () => SecondPage())  ];}

 3、Get.off()和Get.offNamed()


这两个效果是一样的。表示跳到下一个页面,会关闭上一个页面。
 

4、Get.offAll()和Get.offAllNamed()


这两个效果是一样的。表示跳到下一个页面,会关闭除它之外的所有页面。
这个场景是我们退出登录,清空之前的所有页面。


5、Get.offUntil()

对应的原生路由  Navigation.pushAndRemoveUntil()
在使用上述方式跳转时,会按次序移除其他的路由,直到遇到被标记的路由(predicate函数返回了true)时停止。若 没有标记的路由,则移除全部。当路由栈中存在重复的标记路由时,默认移除到最近的一个停止。

Get.offUntil(GetPageRoute(page: () => SecondPage()),(route) => (route as GetPageRoute).routeName == null);

此时的路由栈示意图(来自网络):

Get.offUntil(GetPageRoute(page: () => SecondPage()),(route) => (route as GetPageRoute).routeName == '/');


 此时的路由栈示意图(来自网络):

6、 Get.offAndToNamed()

对应的原生路由是 Navigation.popAndPushNamed()/ pushReplacement / pushReplacementNamed / 

表示跳到的下一个页面会替换上一个页面。

此时的路由栈示意图(来自网络):

 7、Get.back()

返回到上一个页面(对应于Get.to放到到路由页面跳转有效,off方法页面跳转无效)

如果需要携带数据返回可加result参数:Get.back(result)

然后上一个页面接收返回的数据:var result = await Get.to(page);

二、路由中间件

当触发路由事件的时候,会回调GetMaterialApp里的一个回调方法routinGCallback

GetMaterialApp(    unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),    routingCallback: (routing) {      if(routing?.current == '/second'){       ///处理一些业务      }    },    initialRoute: '/',    getPages: [      GetPage(name: '/first', page: ()=>First()),      GetPage(name: '/second', page: ()=>Second())    ],  )

如果你没有使用GetMaterialApp,你可以使用手动api来附加Middleware观察器。

 MaterialApp(      onGenerateRoute: Router.generateRoute,      initialRoute: "/",      navigatorKey: Get.key,      navigatorObservers: [        GetObserver(MiddleWare.observer)      ],    ),

三、嵌套导航

Get让Flutter的嵌套导航更加简单。 你不需要context,而是通过Id找到你的导航栈。

注意:创建平行导航堆栈可能是危险的。理想的情况是不要使用NestedNavigators,或者尽量少用。如果你的项目需要它,请继续,但请记住,在内存中保持多个导航堆栈可能不是一个好主意(消耗RAM)。
 

Navigator(  key: Get.nestedKey(1), // create a key by index  initialRoute: '/',  onGenerateRoute: (settings) {    if (settings.name == '/') {      return GetPageRoute(        page: () => Scaffold(          appBar: AppBar(            title: Text("Main"),          ),          body: Center(            child: TextButton(              color: Colors.blue,              onPressed: () {                Get.toNamed('/second', id:1); // navigate by your nested route by index              },              child: Text("Go to second"),            ),          ),        ),      );    } else if (settings.name == '/second') {      return GetPageRoute(        page: () => Center(          child: Scaffold(            appBar: AppBar(              title: Text("Main"),            ),            body: Center(              child:  Text("second")            ),          ),        ),      );    }  }),

四、其他用法

snackbar用法

Get.snackbar('Hi', 'i am a modern snackbar');
To open dialog:Get.dialog(YourDialogWidget());To open default dialog:Get.defaultDialog(  onConfirm: () => print("Ok"),  middleText: "Dialog made in 3 lines of code");
Get.bottomSheet(  Container(    child: Wrap(      children: [        ListTile(          leading: Icon(Icons.music_note),          title: Text('Music'),          onTap: () {}        ),        ListTile(          leading: Icon(Icons.videocam),          title: Text('Video'),          onTap: () {},        ),      ],    ),  ));

来源:https://github.com/jonataslaw/getx/blob/master/documentation/en_US/route_management.md

来源地址:https://blog.csdn.net/hjjdehao/article/details/126270895

--结束END--

本文标题: Flutter 全能型选手GetX —— 路由管理

本文链接: https://lsjlt.com/news/386826.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Flutter 全能型选手GetX —— 路由管理
     使用篇   简介依赖管理路由管理状态管理主题配置多语言配置离线缓存网络请求  原理篇 从源码看Getx的依赖原理  一、Getx 路由基本使用 1、普通路由 Get.to(SecondPage())和 Get.to(() => Sec...
    99+
    2023-08-31
    flutter getx 路由
  • Flutter学习四:Flutter开发基础(三)路由管理
    目录 0 引言 1 路由管理  1.1 MaterialPageRoute 1.2 Navigator  1.2.1 Future push(BuildContext context, Route route) 1.2.2  bool po...
    99+
    2023-09-22
    flutter 学习
  • Flutter路由管理插件fluro使用简介
    前面两篇文章我们介绍了Flutter 的原生导航器 Navigator 实现页面跳转,路由及路由拦截的使用,具体可以参考之前的文章: Flutter页面路由及404路由拦截实现 Fl...
    99+
    2024-04-02
  • Flutter如何完成路由拦截,实现权限管理
    目录相关文章 fluro 路由拦截思路 定义路由时拦截 跳转时拦截 之前几篇介绍了 fluro 的路由管理和转场动画,本篇介绍如何完成路由拦截,进而实现权限管理。“此路是我开,此树...
    99+
    2024-04-02
  • Flutter路由管理代码这么长怎么高效解决
    这篇文章给大家介绍Flutter路由管理代码这么长怎么高效解决,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。01  背景在Flutter的业务开发过程中,Flutter侧会逐渐丰富自己的路由管理。一...
    99+
    2023-06-04
  • SOCKS5代理网络传输的全能选手
    在网络世界中,SOCKS5代理是一个广泛应用的网络传输协议,为用户提供多种功能。SOCKS的名字来自SOCKetS,它在客户端与外部服务器之间充当"中间人",起到了连接和控制的作用。本文将深入探讨SOCKS5代理,包括其...
    99+
    2023-10-23
    代理 SOCKS5 网络传输工具
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作