Flutter之GetX插件 2024-06-24 周一
简介
状态管理,页面跳转,以及一些有用的小工具,基本上都用上,pub上的点赞数也是很客观的,基本上都会用。
![](https://img.haomeiwen.com/i1186939/b369a99a94607c2a.png)
替换MaterialApp
在程序的开始,用GetMaterialApp替换默认生成的MaterialApp;这两者参数基本一样,换个函数名就可以了。这步没什么好说,这就是引入Get的方式,照做就是了。Get这种耦合很深的插件,没有必要再包一层了,直接用,也没有替代者,用和不用,连页面文件都不一样。一旦选定,回退的可能都没有。
void main() => runApp(GetMaterialApp(home: Home()));
使用.obs吗?
答案是不用。
介绍起来看着很美好,但是实际使用起来并不是那么回事。我们一开始也在一两个页面用过,感觉很酷,后来都改掉了。
要用命名路由吗?
答案是不用。
命名路由看起来很美好,但是不够简洁,远远没有普通路由用起来方便。
普通路由Get.to(() = > NextScreen()); 用起来更顺手,看起来更顺眼。这个页面的路由名字其实也是有的,其实就是“/NextScreen”,这是Get内部默认的路由名字,在需要用到的场合可以直接用。
关于页面
-
需要state吗?
答案是不需要,这是从前端带过来的思想,把一个页面分为state、logic、view三层;数据定义在state中,然后成为logic中的一个成员;logic和view之间通过binding建立联系,也就是Get.put方法。
一开始我们为每一个页面建立三个文件,将数据、逻辑、页面分开;只是后来用着用着,state文件除了定义变量,没有任何作用,逐渐就不要了,直接在logic中定义变量,用起来还更方便一些。 -
使用GetView吗?
答案是可以使用。
Controller和View,将逻辑和现实分开,并且将binding过程内置,也就是Get.put函数默认实现。controller成为一个不需要定义而可以直接使用的魔法变量,虽然有点奇怪,但是习惯了也就好了。
GetView使用Stateless Widget,这点值得推荐。
class AwesomeController extends GetController {
final String title = 'My Awesome View';
}
// ALWAYS remember to pass the `Type` you used to register your controller!
class AwesomeView extends GetView<AwesomeController> {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
child: Text(controller.title), // just call `controller.something`
);
}
}
-
GetX插件
这是我们现在的用法,使用GetX插件辅助,每个页面用logic和page两个文件来表示,同样将逻辑和显示分开。
一开始Stateless和Stateful的Widget我们都有使用,后来也逐渐回归到默认使用Stateless的Widget,只有极少数情况,确实必要的时候,才会偶尔使用Stateful的Widget
并且GetBuilder中的Logic一般不用,而是直接使用全局变量的Logic
这些都和GetView的方式一致。
比如,采用下面的配置,就会自动生成TestLogic和TestPage两个文件
GetX例子
![](https://img.haomeiwen.com/i1186939/9ceff996c16ee7f4.png)
class TestLogic extends GetxController {
}
class TestPage extends StatelessWidget {
final logic = Get.put(TestLogic());
@override
Widget build(BuildContext context) {
return GetBuilder<TestLogic>(builder: (logic) {
return Container();
});
}
}
- 尝试结合使用
后续使用可以把这两者联合起来,用插件生成模板文件,然后改成GetView的形式,命名仍然保持logic和Page不变
class TestLogic extends GetxController {
}
class TestPage extends GetView<TestLogic> {
const TestPage({super.key});
@override
Widget build(BuildContext context) {
return Container();
}
}
多语言
这个会使用,直接"key".tr的使用形式很方便,实际使用中会按照语言分成不同的文件,文件内容就是一个Map,各种语言用同一套key
做的再好一点,客户端就存一份默认的语言Map,然后其他的语言文件都从后端通过接口下载。
这块内容比较繁琐,需要各部门配合,统一设计一下。
Theme
暗黑模式和普通模式的切换。
如果只是普通和暗黑两种模式,还是比较方便的。如果加入“跟随系统选项”,就会比较麻烦。Get.changeTheme()和Get.isDarkMode这两个方法是肯定会用到的
网络
GetConnect是用来做网络的,一般不会用到。因为Flutter中网络基本上会用Dio,不会用这个。
GetPage Middleware是配合GetConnect使用的,也不会用到。其功能可以由Dio中的拦截器来替代。
一些有用的工具
// give the current args from currentScreen
Get.arguments
// Check in what platform the app is running
GetPlatform.isAndroid
GetPlatform.isIOS
// Equivalent to : MediaQuery.of(context).size.height,
// but immutable.
Get.height
Get.width
// Gives the current context of the Navigator.
Get.context
GetxService用吗?
一般不用,还是直接写单例比较方便
关于tag
一般情况下,controller的实例只有一个,所以会出现多个相同controller的页面数据一样。为了让controller产生多个实例,就要用到tag属性来进行区分,这是String?类型。
最方便的,还是通过构造函数传入,放在argument参数中,还有个时机问题,反而更复杂。