注册

Flutter终极大杀器,一个它顶四个库!

每次新建Flutter项目,是我最痛苦的时间,每次去pub仓库找库,再复制粘贴到 pubspec.yaml ,再执行 flutter pub get 。这套操作往往需要重复十几次。毕竟Flutter大到路由,状态管理,小到工具类,国际化都需要库来支持,等找齐这些东西,终于可以准备开发的时候,半天已经过去了。


所幸,我在pub仓库发现了它,GetX,这玩意是真的牛皮,使用它大大小小开发了四五个项目后,确定了稳定性和性能后,决定进行分享一波。


本文只是简单分享,GetX没有官方文档,只有github的README,所以我结合自己的经验,整理了一份。


github


gitee


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拓展



结语


祝大家在编程路上飞黄腾达,越走越远。


作者:HeStudy
链接:https://juejin.cn/post/6946477749309538334
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0 个评论

要回复文章请先登录注册