Flutter中使用GetX如何让列表的单个元素可观测

根因说明 #

你之前的写法仅将列表本身声明为可观察对象，GetX的RxList默认仅监听列表结构类变更（增/删/替换元素、列表重排序等），不会自动向下监听列表内部元素自身的状态变化，因此单个RxInt值修改时不会触发列表层面的刷新回调。

分步实现方案 #

1. 控制器层定义 #

列表内存储的元素直接声明为RxInt即可，若不需要动态修改列表结构（增删元素），列表本身无需声明为Rx类型：

class NumberController extends GetxController {
  // 仅需要监听元素值变化时，列表本身可不加.obs
  final List<RxInt> numberList = [1.obs, 2.obs, 3.obs, 4.obs];

  // 如果同时需要监听列表结构变化，再加.obs即可
  // final List<RxInt> numberList = <RxInt>[1.obs, 2.obs, 3.obs, 4.obs].obs;
}

2. UI层绑定（局部刷新最优方案） #

不要将整个GridView包裹在Obx内，而是给每个单独的TextField套一层Obx，只监听对应位置的RxInt对象，修改值时只会重绘对应TextField，不会影响其他组件性能：

final NumberController controller = Get.put(NumberController());

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: controller.numberList.length,
  itemBuilder: (context, index) {
    final currentRxInt = controller.numberList[index];
    return Obx(
      () => TextField(
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          hintText: currentRxInt.value.toString(),
        ),
        onChanged: (inputVal) {
          final parsedNum = int.tryParse(inputVal);
          if (parsedNum != null) {
            // 修改单个RxInt的值，只会触发当前包裹它的Obx刷新
            currentRxInt.value = parsedNum;
          }
        },
      ),
    );
  },
)

3. 验证效果 #

修改任意TextField的输入值，对应绑定的RxInt会发送更新通知，仅当前位置的TextField会触发重绘，UI同步更新数值。

常见错误排查 #

• 不要将整个GridView包裹在Obx中监听列表对象，列表本身无结构变更时不会触发刷新
• 不要在列表中存储普通int类型，普通值修改不会发送Rx更新通知
• 不要调用controller.update()强制全局刷新，会造成不必要的性能损耗

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