Flutter GetX持续加载数据致UI不稳定，数据显示混乱

问题描述 #

使用GetX加载分类-子分类-产品层级数据时，按category_id进入子分类页面后，UI持续混乱，数据不断切换显示不同分类内容。打印getSubCategories(widget.catId)发现该方法无限重复执行，返回值为Instance of 'Future<void>'；移除控制器中的update()方法后无法获取数据，但保留又会触发循环刷新。

根本原因 #

getSubCategories方法被写在GetBuilder的builder回调中，每次调用update()会触发builder重建，重建时又会再次调用getSubCategories，形成无限循环请求-刷新的闭环，导致反复拉取数据、UI不断重绘混乱。

修复方案 #

1. 将数据请求移出Builder回调 #

把数据获取逻辑放到页面初始化阶段，确保只执行一次，而非每次UI重建都触发请求。

修改子分类页面代码：

// 假设页面是StatefulWidget，在initState中初始化数据
@override
void initState() {
  super.initState();
  // 仅在页面加载时调用一次数据请求
  Get.find<SubCategoriesController>().getSubCategories(widget.catId);
}

// GetBuilder仅负责渲染UI，不再包含请求逻辑
GetBuilder<SubCategoriesController>(builder: (subCategories) {
  // 增加加载状态判断，优化用户体验
  if (!subCategories.isLoaded) {
    return const Center(child: CircularProgressIndicator());
  }

  return GridView.count(
    crossAxisCount: 2,
    shrinkWrap: true,
    physics: const ScrollPhysics(),
    mainAxisSpacing: 16,
    crossAxisSpacing: 16,
    childAspectRatio: 90 / 100,
    padding: const EdgeInsets.all(16),
    children: List.generate(subCategories.subCategoriesList.length, (index) {
      return _buildSingleSubCategory(
        index,
        SubCategoryModel.fromJson(subCategories.subCategoriesList[index]),
      );
    }),
  );
})

2. 优化控制器请求逻辑，避免重复请求 #

在控制器中增加当前分类ID的记录，防止重复请求相同分类的数据，同时完善加载状态管理：

修改控制器代码：

// 新增变量记录当前请求的分类ID
int? _currentCatId;

Future<void> getSubCategories(int cat_id) async {
  // 如果当前分类已加载，直接返回，避免重复请求
  if (_currentCatId == cat_id && _isLoaded) {
    return;
  }

  _currentCatId = cat_id;
  _isLoaded = false;
  update(); // 先更新为加载状态，触发UI显示加载指示器

  try {
    Response response = await subCategoriesRepo.getSubCategoriesList(cat_id);
    if (response.statusCode == 200) {
      _subCategoriesList = List.from(response.body);
      _isLoaded = true;
    } else {
      // 请求失败时清空列表，标记加载完成
      _subCategoriesList = [];
      _isLoaded = true;
    }
  } catch (e) {
    // 捕获异常，避免崩溃
    _subCategoriesList = [];
    _isLoaded = true;
    debugPrint('获取子分类失败: $e');
  }

  update(); // 数据处理完成后更新UI
}

说明 #

• 把请求移出Builder后，彻底切断了“刷新→请求→刷新”的循环。
• 控制器的分类ID判断和异常捕获，进一步保障了请求的稳定性，避免不必要的重复请求和崩溃。
• 加载状态的添加让用户在数据加载过程中看到反馈，提升体验。

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