GetX 状态管理从入门到入迷

前言

GetX 为状态管理提供了两种方式,一种是简单的方式,使用 GetBuilder 形式实现,另一种方式是响应式状态管理。简单的方式十分轻量和简单,而且无需使用 ChangeNotifier。对于初学者来说,通过这种方式了解GetX 的状态管理会更容易入手,而且就算是大型应用这种方式也是 OK 的。本篇以最简单的计数器来讲解 GetX 的简单状态管理

状态类

状态类在 GetX 中称之为 Controller,需要继承GetxController,当状态发生改变的时候,调用update 方法即可通知依赖状态的组件进行刷新。在 VSCode 中安装好 GetX Snippets 插件,我们使用 getcontroller 指令就可以快速输入状态模板代码。我们的最简单的计数器状态代码如下所示:

class CounterController extends GetxController {
  int _counter = 0;

  get counter => _counter;

  void increment() {
    _counter++;
    update();
  }
}

视图界面

界面层在需要使用状态的地方使用 GetBuilder 包裹,然后就可以使用 Controller 访问状态对象和操作状态方法了。其中GetBuilder只需要两个参数:

  • init:初始状态对象,在这里可以完成状态对象的初始化。
  • builder 方法:这个方法用于构建依赖状态的组件树,方法携带状态对象参数,因此下面的组件可以访问到状态对象。而且一旦状态对象通过 update 方法通知有更新时,依赖状态对象的组件就会被刷新。

计数器的视图界面的 build 代码如下,可以看到整个使用十分简洁。

Widget build(BuildContext context) {
  return GetBuilder<CounterController>(
    init: CounterController(),
    builder: (controller) => Scaffold(
      appBar: AppBar(
        title: Text('GetX计数器'),
      ),
      body: Center(
        child: Text(
          '${controller.counter}',
          style: TextStyle(
            color: Colors.blue,
            fontSize: 24.0,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          controller.increment();
        },
      ),
    ),
  );
}

深入优化

上面的这种方式有个缺点,那就是GetBuilder包裹了整个 Scaffold ,如果 Scaffold 的组件树很大会导致性能问题。我们应该只包裹依赖状态对象的组件。但对于这个例子来说,FloatingActionButton和 Text 并不在一个层级上,对于这种情况,GetX 提供了一种共享状态的方法。在状态类中实现一个静态的 Get.find()别名方法即可。

static CounterController get to => Get.find();

有了这个方法后,只要状态对象注册一次之后,就可以在任何地方使用CounterController.to访问到了。现在,我们改造后的计数器界面代码就可以最小化状态对象的依赖了。

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('GetX计数器'),
  ),
  body: Center(
    child: GetBuilder<CounterController>(
      init: CounterController(),
      builder: (_) => Text(
        '${CounterController.to.counter}',
        style: TextStyle(
          color: Colors.blue,
          fontSize: 24.0,
        ),
      ),
    ),
  ),
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
      CounterController.to.increment();
    },
  ),
);

总结

本篇我们介绍了GetX 的简单状态管理 GetBuilder 和状态类的构建,这种方式借助 GetX Snippets插件后,编码的工作并不多,这也是GetX 生产力的体现(看到这个是不是马上入迷,想抛弃其他状态管理插件,直接选用 GetX?)。我们还介绍了如何进行状态共享和最小化 GetBuilder 的作用范围,从而减少不必要的组件刷新,提高性能。下一篇我们介绍这种方式和网络请求结合,看看有网络请求(异步操作的时候怎么完成状态更新)。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,099评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,828评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,540评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,848评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,971评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,132评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,193评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,934评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,376评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,537评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,175评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2 351

推荐阅读更多精彩内容