使用Getx时如何保证获取列表数据的方法在ListView.builder构建前执行

• 初始化逻辑放置位置错误：build方法仅用于构建视图，会随界面重绘多次触发，不能在此处执行数据初始化操作，也无法保证逻辑在ListView构建前稳定执行。
• 未使用GetxController自带生命周期：GetxController提供了onInit生命周期回调，会在Controller被注入后、页面首次构建前自动执行，不需要自行定义init方法手动调用。
• 若getRemoteItems是异步方法，当前代码未加await等待请求结果，也会导致items赋值失败。

首先修改TestModel，用官方生命周期做初始化：

class TestModel extends GetxController {
  final items = <Item>[].obs;

  // 重写onInit，自动在Controller初始化后执行
  @override
  void onInit() {
    super.onInit();
    // 若getRemoteItems是异步请求，将onInit改为Future<void>并加await
    items.value = getRemoteItems();
  }
}

然后修改TestScreen，删除build中的手动初始化逻辑，增加加载/空状态占位：

class TestScreen extends StatelessWidget {
  final TestModel testModel = Get.put(TestModel());

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => testModel.items.isEmpty
          // 可自定义加载中或空数据提示
          ? const Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: testModel.items.length,
              itemBuilder: (context, index) {
                final item = testModel.items[index];
                // 列表项布局逻辑
                ...
              },
          ),
    );
  }
}

如果getRemoteItems是异步接口请求，修改onInit为异步写法即可：

@override
Future<void> onInit() async {
  super.onInit();
  final remoteItems = await getRemoteItems();
  items.value = remoteItems;
}

• 不要在build方法中执行任何带有副作用的逻辑（网络请求、数据赋值等），避免重复触发或时机错误。
• Obx会自动监听响应式变量的变化，items更新后会自动刷新ListView，不需要手动触发重绘。
• GetxController的onReady回调会在页面首次渲染完成后触发，若有需要在页面显示后执行的逻辑可以放在此处。

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