Flutter GetX 如何让build内数据请求仅在新增数据时触发 避免重复调用

核心逻辑是将数据状态、请求逻辑和页面生命周期解绑，通过持久化Controller存储状态，仅在首次加载和主动触发更新时调用接口。

实现步骤 #

1. 封装独立的GetxController管理数据和请求逻辑
   新建继承自GetxController的类，存储请求到的数据、首次加载标记，分别实现首次加载接口、按需拉取新数据的方法：

class DataController extends GetxController {
  // 替换为你的实际数据模型
  final RxList<DataModel> dataList = <DataModel>[].obs;
  // 标记是否已经完成首次数据加载
  final RxBool hasInitialized = false.obs;

  // 首次加载数据接口，仅调用一次
  Future<void> getData() async {
    if (hasInitialized.value) return;
    // 你的原有API请求逻辑
    final apiResult = await yourApiRequestMethod();
    if (apiResult.success) {
      dataList.assignAll(apiResult.data);
      hasInitialized.value = true;
    }
  }

  // 主动拉取新数据方法，仅当需要更新时调用
  Future<void> fetchNewData() async {
    final apiResult = await yourApiRequestMethod();
    if (apiResult.success) {
      // 对比已有数据，过滤重复内容后添加新数据
      final newItems = apiResult.data.where(
        (item) => !dataList.any((existItem) => existItem.uniqueId == item.uniqueId)
      ).toList();
      if (newItems.isNotEmpty) {
        dataList.addAll(newItems);
      }
    }
  }
}

2. 注册Controller时开启持久化配置
   注册时添加permanent: true参数，保证Controller不会随着页面销毁被回收，状态会全程保留：

// 可在APP启动时全局注册，或页面首次使用时注册
Get.put(DataController(), permanent: true);

3. 页面中移除生命周期绑定的请求逻辑
   页面内不再在initState等生命周期方法中调用getData，仅监听Controller的响应式数据渲染UI：

class DataDisplayPage extends StatelessWidget {
  final DataController controller = Get.find<DataController>();

  @override
  Widget build(BuildContext context) {
    // 仅首次进入页面且未初始化过数据时调用一次加载接口
    if (!controller.hasInitialized.value) {
      controller.getData();
    }
    return Scaffold(
      body: Obx(() {
        if (controller.dataList.isEmpty) {
          return const Center(child: Text("暂无数据"));
        }
        // 你的原有列表渲染逻辑
        return ListView.builder(
          itemCount: controller.dataList.length,
          itemBuilder: (context, index) => ListItem(data: controller.dataList[index]),
        );
      }),
      // 示例：下拉刷新时主动调用拉新接口
      // 你也可以在其他页面数据变更后返回时调用该方法触发更新
      floatingActionButton: FloatingActionButton(
        onPressed: () => controller.fetchNewData(),
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

可选扩展 #

如果需要从其他操作页面返回后自动拉取新数据，可以在跳转逻辑中添加返回回调：

// 跳转到新增数据页的代码
Get.to(const AddNewDataPage())?.then((_) => Get.find<DataController>().fetchNewData());

这样只有完成新增操作返回列表页时才会触发接口请求，常规导航进入页面不会重复调用接口。

内容的提问来源于stack exchange，提问作者x-DZ-Ax