Flutter 入门与实战（七十二）：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 的作用范围，从而减少不必要的组件刷新，提高性能。下一篇我们介绍这种方式和网络请求结合，看看有网络请求（异步操作的时候怎么完成状态更新）。

我是岛上码农，微信公众号同名，这是Flutter 入门与实战的专栏文章，提供体系化的 Flutter 学习文章。对应源码请看这里：Flutter 入门与实战专栏源码。如有问题可以加本人微信交流，微信号：island-coder。

👍🏻：觉得有收获请点个赞鼓励一下！

🌟：收藏文章，方便回看哦！

💬：评论交流，互相进步！