Flutter终极大杀器,一个它顶四个库!
每次新建Flutter项目,是我最痛苦的时间,每次去pub仓库找库,再复制粘贴到 pubspec.yaml
,再执行 flutter pub get
。这套操作往往需要重复十几次。毕竟Flutter大到路由,状态管理,小到工具类,国际化都需要库来支持,等找齐这些东西,终于可以准备开发的时候,半天已经过去了。
所幸,我在pub仓库发现了它,GetX
,这玩意是真的牛皮,使用它大大小小开发了四五个项目后,确定了稳定性和性能后,决定进行分享一波。
本文只是简单分享,GetX没有官方文档,只有github的README,所以我结合自己的经验,整理了一份。
GetX为何物?
GetX 是 Flutter 上的一个轻量且强大的解决方案:高性能的状态管理、智能的依赖注入和便捷的路由管理。
GetX 有3个基本原则:
- 性能: GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。如果你感兴趣,这里有一个性能测试。
- 效率: GetX 的语法非常简捷,并保持了极高的性能,能极大缩短你的开发时长。
- 结构: GetX 可以将界面、逻辑、依赖和路由完全解耦,用起来更清爽,逻辑更清晰,代码更容易维护。
GetX 并不臃肿,却很轻量。如果你只使用状态管理,只有状态管理模块会被编译,其他没用到的东西都不会被编译到你的代码中。它拥有众多的功能,但这些功能都在独立的容器中,只有在使用后才会启动。
GetX能干什么?
GetX包含的功能:
- 状态管理
- 路由
- 国际化
- 工具类
- IDE拓展
- 工程化Cli
- ......
GetX的优点?
对于一个菜鸟来说,它最大的优点当然是 简单易上手
举几个例子:
状态管理
创建一个 Controller
管理你的状态变量
class Controller extends GetxController{
var count = 0.obs;
increment() => count++;
}
然后直接使用
class Home extends StatelessWidget {
@override
Widget build(context) {
// 使用Get.put()实例化你的类,使其对当下的所有子路由可用。
final Controller c = Get.put(Controller());
return Scaffold(
// 使用Obx(()=>每当改变计数时,就更新Text()。
appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),
// 用一个简单的Get.to()即可代替Navigator.push那8行,无需上下文!
body: Center(child: ElevatedButton(
child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
floatingActionButton:
FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
}
}
class Other extends StatelessWidget {
// 你可以让Get找到一个正在被其他页面使用的Controller,并将它返回给你。
final Controller c = Get.find();
@override
Widget build(context){
// 访问更新后的计数变量
return Scaffold(body: Center(child: Text("${c.count}")));
}
}
你只需要 put
一个 Controller
后,再将 widget
包裹在 Obx
中,这样就将 count
绑定在了你的 widget
中,只要 count
发生改变, widget
就很跟着更新。
注意,Controller是与Widget解耦的,只有进行了put才会进行绑定,所以是局部状态还是全局状态完全由你自己决定。
路由
GetX的路由最大的特点就是,不需要 context
,直接使用即可
导航到新页面
Get.to(NextScreen());
用别名导航到新页面。
Get.toNamed('/details');
要关闭snackbars, dialogs, bottomsheets或任何你通常会用Navigator.pop(context)关闭的东西。
Get.back();
进入下一个页面,但没有返回上一个页面的选项(用于闪屏页,登录页面等)。
Get.off(NextScreen());
进入下一个页面并取消之前的所有路由(在购物车、投票和测试中很有用)。
Get.offAll(NextScreen());
国际化
GetX的国际化尤其简单,我们只需要新建一个 Translations
类
import 'package:get/get.dart';
class Messages extends Translations {
@override
Map<String, Map<String, String>> get keys => {
'zh_CN': {
'hello': '你好 世界',
},
'de_DE': {
'hello': 'Hallo Welt',
}
};
}
并且将你的 MaterialApp
更改为 GetMaterialApp
,并绑定上刚刚创建的 Translations
类。
不用担心,GetMaterialApp支持所有MaterialApp的接口,它们是兼容的
return GetMaterialApp(
translations: Messages(), // 你的翻译
locale: Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
fallbackLocale: Locale('en', 'US'), // 添加一个回调语言选项,以备上面指定的语言翻译不存在
);
然后直接使用
Text('title'.tr);
是的,你只需要在字符串后面加上 .tr
即可使用国际化功能
GetX Cli是何物?
GetX Cli是一个命令行脚本,类似vue cli,但更强大一些,它可以做到:
- 创建项目
- 项目工程化
- 生成Model
- 生成page
- 生成view
- 生成controller
- 自定义controller模板
- 生成翻译文件
- ......
想要使用GetX Cli,你需要安装dart环境或者Flutter环境
然后直接安装即可使用
pub global activate get_cli
# or
flutter pub global activate get_cli
创建项目
get create project:my_project
这个命令会调用 flutter create
,然后再执行 get init
项目工程化
get init
生成page
get create page:home
生成controller
get create controller:dialogcontroller on home
生成view
get create view:dialogview on home
生成model
get generate model on home with assets/models/user.json
更多详细命令去看文档吧
IDE拓展
- getx_template:一键生成每个页面必需的文件夹、文件、模板代码等等
- GetX Snippets:输入少量字母,自动提示选择后,可生成常用的模板代码
结语
祝大家在编程路上飞黄腾达,越走越远。
作者:HeStudy
链接:https://juejin.cn/post/6946477749309538334
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。