您好!
欢迎来到京东云开发者社区
登录
首页
博文
课程
大赛
工具
用户中心
首页
博文
课程
大赛
工具
更多
用户中心
开发者社区
>
博文
>
Flutter开发神器 — getX 介绍
分享
打开微信扫码分享
点击前往QQ分享
点击前往微博分享
点击复制链接
Flutter开发神器 — getX 介绍
自猿其说Tech
2022-03-14
IP归属:未知
324320浏览
前端
### 1 前言 笔者在浏览技术文章时,发现了一个Flutter开发开源框架 —— getX,了解后发现可以极大简化Flutter的开发,提高Flutter开发的效率,堪称Flutter开发神器。于是,在项目中进行了使用和实践,感觉确实不错。这里做一个简单的介绍。 ### 2 简介 getX 是 Flutter 上的一个轻量且强大的解决方案:高性能的状态管理、智能的依赖注入和便捷的路由管理。 1)getX 有3个基本原则: - 性能: getX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。 - 效率: getX 的语法非常简捷,简单易用。并保持了极高的性能,能极大缩短你的开发时长。 - 结构: getX 可以将界面、逻辑、依赖和路由完全解耦,用起来更清爽,逻辑更清晰,代码更容易维护。 2)getX 并不臃肿,却很轻量。 如果你只使用状态管理,只有状态管理模块会被编译,其他没用到的东西都不会被编译到你的代码中。它拥有众多的功能,但这些功能都在独立的容器中,只有在使用后才会启动。 ### 3 功能 getX提供了哪些功能呢?可以看下面官方提供的这张图: ![](//img1.jcloudcs.com/developer.jdcloud.com/34b831ee-bd4c-4019-848d-0c8c69d447f420220314143654.png) - 路由管理:路由导航,且不依赖Context; - 统一封装:封装了Toast、Dialog和底部弹窗,一行代码搞定,且不依赖Context; - 状态管理:完全不逊色Provider,甚至比Provider更优的状态管理 - 依赖管理:跨页面交互:各个页面间全局的数据和状态传递; - 存储管理:完全通过Dart语言实现的SharePreference,有了它,你不再需要任何其他SharePreference的第三方插件包 - 国际化:更方便实现国际化(18in1); - 主题管理:更容易的Theme替换 - Utils包:封装好的Utils包 当然,getX提供的功能不仅仅是以上8个方面,还有其他的功能,大家可以查看官方文档了解更多。 ### 4 为什么选择 GetX 做状态管理? 我们知道,Flutter开发的核心是状态管理。从最原始的通过StatefulWidget+setState进行管理,到后来的Bloc,再到现在流行的Provider,笔者都经历过。 通过StatefulWidget+setState 和 Bloc 进行Flutter开发比较繁琐。直到Provider框架的出现,这种情况才有所改观。Provider确实是一款优秀的Flutter开发开源框架。但也存在一定的局限性。 Provider核心原理,就是采用了InheritedWidget的刷新机制 + ChangeNotifier 实现的 开发者一直致力于业务逻辑分离的概念, BLoc 、Provider 都是衍生的 MVC、MVVM 等架构模式,但是这几种方案的状态管理均使用了上下文(context),需要上下文来寻找InheritedWidget,这种解决方案限制了状态管理必须在父子代的 widget 树中,业务逻辑也会对 View 产生较强依赖。 而 GetX 因为不需要上下文,突破了InheritedWidget的限制,我们可以在全局和模块间共享状态,这正是 BLoc 、Provider 等框架的短板。 当然,状态管理只是GetX提供的最主要能力之一,其提供的功能远不止这些。你也可以很方便的在使用Provider的项目中引入GetX。Flutter开发的核心是状态管理,使用GetX后你会发现相较于之前的框架比如Provider更加灵活,效率更高。项目中可以和provider同时使用。 ### 5 使用 getX使用非常简单,只需要几步就能将GetX使用到你的项目中,而且可以说是非浸入性的,笔者已在项目中实现,确实很方便快捷。 下面,按照国际惯例,实现一个计数器的例子 —— Flutter界的 “Hello World” Flutter默认创建的 "计数器 "项目有100多行(含注释),而通过getX实现这一切只需 26 行代码(含注释) #### 5.1 引入 getX ```yaml dependencies: get: ``` 在需要用到的文件中导入: ```java import 'package:get/get.dart'; ``` #### 5.2 在你的项目中的MaterialApp改成GetMaterialApp ```java class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //将MaterialApp变成GetMaterialApp。 return GetMaterialApp( home: Scaffold( ), ); } } ``` 至此,getX就引入到项目中了,现在就可以使用getX提供的功能了。下面我们编写具体的页面和逻辑代码。 #### 5.3 编写业务逻辑类 类似于Provider框架开发里的View Model。你可以将所有的变量和方法放在这个类里,实现自己的业务逻辑 ```java import 'package:get/get.dart'; class CountVM extends GetxController{ var count = 0.obs; //使用".obs "使任何变量成为可观察的。 increment() => count++; } ``` 编写我们自己的业务逻辑类,只需要继承 GetxController,在这个类里: 1. 定义了一个变量:count,使用了一个简单的".obs "使该变量变的可观察。你可以使用".obs "使任何变量成为可观察的。 1. 定义了一个方法:让计数器自增; #### 5.4 编写页面 ```java class GetXHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 使用Get.put()实例化你的类,使其对当下的所有子路由可用。 final CountVM vm = Get.put(CountVM()); var testStr = 'testStr'; var str = Get.put(testStr); //页面间参数访问 return Scaffold( // 使用Obx(()=>每当改变计数时,就更新Text()。 appBar: AppBar(title: Obx(() => Text("Clicks: ${vm.count}"))), // 用一个简单的Get.to()即可代替Navigator.push那8行,且不需要Context body: Center( child: ElevatedButton( child: Text("Go to Second Page"), onPressed: () => Get.to(SecondPage()))), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: vm.increment)); } } //第二个页面,用于示例页面路由和参数传递 class SecondPage extends StatelessWidget { // 你可以让Get找到一个正在被其他页面使用的VM,并将它返回给你。 final CountVM vm = Get.find(); final String str = Get.find(); //页面间参数访问 @override Widget build(BuildContext context) { // 访问更新后的计数变量 return Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Obx(() => Text("${vm.count}")), Text(str),//通过Get.find()获取上个页面的数据;方便简洁 ], ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: vm.increment)); } } ``` 至此,页面编写完成,功能也实现了,是不是很简单?是不是感受到了getX的强大。随着项目的发展,代码和功能变得越来越多,业务逻辑变得越来越复杂,getX的优势将变的更加明显 对于页面编写: 1)页面继承自StatelessWidget:使用getX后,编写界面将不再需要StatefulWidget,可以一律继承自StatelessWidget节省一些内存 2)使用Get.put()实例化你的类,在当前页面可以直接使用,而对当下的所有子路由也可用:通过如下代码获取: ```java // 使用Get.put()实例化你的类,在当前页面可以直接使用 final CountVM vm = Get.put(CountVM()); //在其他页面直接获取,实现路由间传参 // 你可以让Get找到一个正在被其他页面使用的VM,并将它返回给你。 //类似于Provider里的Provider.of<XXXViewModel>(context, listen: false); //但是,比Provider.of功能更强大、更灵活,且event_bus插件将不需要 final CountVM vm = Get.find(); final String str = Get.find(); ``` getX提供了Get.put 和 Get.find 在页面间实现路由间传参,你可以让Get找到一个正在被其他页面使用的VM,并将它返回给你。类似于Provider里的Provider.of<XXXViewModel>(context, listen: false); 但是,比Provider.of功能更强大、更灵活,且event_bus插件将不在需要。 3)而对于关键的状态管理和页面刷新: ```java //要想让它变得可观察,你只需要在它的末尾加上".obs"。 var count = 0.obs; //而在UI中,当你想显示该值并在值变化时更新页面,只需这样做。 // 使用Obx(()=>每当改变计数时,就更新Text()。 appBar: AppBar(title: Obx(() => Text("Clicks: ${vm.count}"))), ``` 4)而对于路由管理,只需要: ```java // 用一个简单的Get.to()即可代替Navigator.push那8行,且不要关心Context! Get.to(OtherPage()) ``` #### 5.5 小结 上面的例子getX给我们实现的功能有: - 简洁的状态管理; - 简洁的路由:在不同页面之间切换; - 在不同页面之间共享状态和传递参数; - 将业务逻辑与界面分离; ### 6 其他高级API ```java //打开Dialogs: Get.dialog(YourDialogWidget()); //打开默认Dialogs: Get.defaultDialog( onConfirm: () => print("Ok"), middleText: "Dialog made in 3 lines of code" ); //Get.bottomSheet类似于showModalBottomSheet,但不需要context: Get.bottomSheet( Container( child: Wrap( children: <Widget>[ ListTile( leading: Icon(Icons.music_note), title: Text('Music'), onTap: () {} ), ListTile( leading: Icon(Icons.videocam), title: Text('Video'), onTap: () {}, ), ], ), ) ); // 给出当前页面的args。 Get.arguments //给出以前的路由名称 Get.previousRoute // 给出要访问的原始路由,例如,rawRoute.isFirst() Get.rawRoute // 允许从GetObserver访问Rounting API。 Get.routing // 检查 snackbar 是否打开 Get.isSnackbarOpen // 检查 dialog 是否打开 Get.isDialogOpen // 检查 bottomsheet 是否打开 Get.isBottomSheetOpen // 删除一个路由。 Get.removeRoute() //反复返回,直到表达式返回真。 Get.until() // 相当于.MediaQuery.of(context).size.height, //但不可改变。 Get.height Get.width // 提供当前上下文。 Get.context //检查num a是否低于num b。 isLowerThan(num a, num b) → bool //检查字符串是否为MD5哈希。 isMD5(String s) → bool //检查数据是否为空。 isNull(dynamic value) → bool //检查数据是否为null或空(空或仅包含空格)。 isNullOrBlank(dynamic value) → bool? //检查字符串是int还是double。 isNum(String value) → bool ``` 以上是getX提供给我们使用的一些其他的API,这仅仅只是很少的一部分。 ### 7 辅助开发插件 通过Get CLI,无论是在服务器上还是在前端,整个开发过程都可以完全自动化。此外,为了进一步提高您的生产效率,还有一些插件: - getx_template:一键生成每个页面必需的文件夹、文件、模板代码等等 - Android Studio/Intellij插件 - GetX Snippets:输入少量字母,自动提示选择后,可生成常用的模板代码 - Android Studio/Intellij:扩展VSCode扩展 ### 8 总结 笔者在项目中已引入和使用了getX,确实感受到了getX的强大,极大的简化了Flutter的开发,提高了开发效率: - 轻量级的Flutter开发框架,不仅仅提供状态管理解决方案; - 方便易用,可以和其他状态框架共用; - 模块化编译实现,只有用的模块才会被编译到你的代码中; - 可选灵活的插件实现模块代码,方便开发; - 性能优势; - 极大简化代码,提高开发效率; 这遍文章抛砖引玉对GetX做了一个简单的介绍,后续会对GetX的原理进行研究和介绍。大家感兴趣可以查看官方文档学习。 ### 9 官方地址 - https://github.com/jonataslaw/getx - https://pub.dev/packages/get ------------ ###### 自猿其说Tech-JDL京东物流技术与数据智能部 ###### 作者:熊进
原创文章,需联系作者,授权转载
上一篇:故障恢复及定位
下一篇:对于Vue3和Ts的心得和思考
相关文章
前端十年回顾 | 漫画前端的前世今生
Taro小程序跨端开发入门实战
【技术干货】企业级扫描平台EOS关于JS扫描落地与实践!
自猿其说Tech
文章数
426
阅读量
2149940
作者其他文章
01
深入JDK中的Optional
本文将从Optional所解决的问题开始,逐层解剖,由浅入深,文中会出现Optioanl方法之间的对比,实践,误用情况分析,优缺点等。与大家一起,对这项Java8中的新特性,进行理解和深入。
01
Taro小程序跨端开发入门实战
为了让小程序开发更简单,更高效,我们采用 Taro 作为首选框架,我们将使用 Taro 的实践经验整理了出来,主要内容围绕着什么是 Taro,为什么用 Taro,以及 Taro 如何使用(正确使用的姿势),还有 Taro 背后的一些设计思想来进行展开,让大家能够对 Taro 有个完整的认识。
01
Flutter For Web实践
Flutter For Web 已经发布一年多时间,它的发布意味着我们可以真正地使用一套代码、一套资源部署整个大前端系统(包括:iOS、Android、Web)。渠道研发组经过一段时间的探索,使用Flutter For Web技术开发了移动端可视化编程平台—Flutter乐高,在这里希望和大家分享下使用Flutter For Web实践过程和踩坑实践
01
配运基础数据缓存瘦身实践
在基础数据的常规能力当中,数据的存取是最基础也是最重要的能力,为了整体提高数据的读取能力,缓存技术在基础数据的场景中得到了广泛的使用,下面会重点展示一下配运组近期针对数据缓存做的瘦身实践。
自猿其说Tech
文章数
426
阅读量
2149940
作者其他文章
01
深入JDK中的Optional
01
Taro小程序跨端开发入门实战
01
Flutter For Web实践
01
配运基础数据缓存瘦身实践
添加企业微信
获取1V1专业服务
扫码关注
京东云开发者公众号