Flutter中多GetX控制器的使用方法及实时更新问题解决代码示例

我明白你遇到的痛点了——当使用多个GetX控制器时，直接用Get.find()获取的控制器无法自动触发UI刷新，而且单个GetBuilder只能绑定一个控制器。下面给你两种实用的解决方案，附完整代码示例：

方案一：多个GetBuilder嵌套监听 #

这种方法适合你想保留原有update()命令式更新逻辑的场景，通过嵌套GetBuilder分别绑定不同的控制器，让每个控制器的更新都能触发UI刷新：

修改后的CounterView代码 #

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 外层GetBuilder绑定Controller1
    return GetBuilder<Controller1>(
      builder: (controller1) {
        // 内层GetBuilder绑定Controller2
        return GetBuilder<Controller2>(
          builder: (controller2) {
            return Text(
              '${controller1.counter} / ${controller2.counter}'
            );
          },
        );
      },
    );
  }
}

原理说明 #

• 当controller1.addCounter()调用update()时，外层的GetBuilder<Controller1>会触发刷新；
• 当controller2.addCounter()调用update()时，内层的GetBuilder<Controller2>会触发刷新；
• 这样无论哪个控制器的counter变化，文本都会实时同步显示。

方案二：使用Rx响应式变量 + Obx（推荐） #

这是GetX更推荐的响应式编程方式，无需手动调用update()，变量变化会自动触发UI更新，代码更简洁，也能轻松支持多控制器场景：

修改控制器为响应式变量 #

class Controller1 extends GetxController {
  // 用.obs把普通int转为Rx响应式变量
  RxInt counter = 0.obs;

  void addCounter() {
    // 修改响应式变量的value属性
    counter.value++;
    // 这里不需要再调用update()！
  }
}

class Controller2 extends GetxController {
  RxInt counter = 0.obs;

  void addCounter() {
    counter.value++;
  }
}

修改CounterView用Obx监听 #

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Controller1 controller1 = Get.find();
    Controller2 controller2 = Get.find();

    // Obx会自动监听所有被访问的Rx变量
    return Obx(() => Text(
      '${controller1.counter.value} / ${controller2.counter.value}'
    ));
  }
}

原理说明 #

Obx内部会追踪所有在其builder函数中访问的Rx响应式变量，不管这些变量来自多少个控制器，只要其中任何一个变量的值发生变化，Obx就会自动重建UI，实现实时同步。

额外注意：控制器初始化 #

别忘了在应用启动或页面加载时注册控制器，否则Get.find()会找不到实例：

void main() {
  // 注册两个控制器到GetX的依赖管理中
  Get.put(Controller1());
  Get.put(Controller2());
  runApp(MyApp());
}

内容的提问来源于stack exchange，提问作者Damian