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

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

结语

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

文章分类
前端
文章标签