如何在GetX状态管理的GetBuilder中展示加载spinner效果

实现步骤 #

• 第一步：在自定义的GetX Controller中定义加载状态标记，封装API请求逻辑，在请求发起和结束时更新加载状态

import 'package:get/get.dart';

class MyDataController extends GetxController {
  // 加载状态标记，默认未加载
  bool isLoading = false;
  // 存储接口返回的数据
  dynamic responseData;

  Future fetchDataFromApi() async {
    // 请求发起前标记为加载中
    isLoading = true;
    // 通知UI更新
    update();

    try {
      // 这里替换成你自己的API请求逻辑
      responseData = await YourApiService.request();
    } catch (e) {
      // 异常处理逻辑
      print('接口请求出错：$e');
    } finally {
      // 请求完成（无论成功失败）都标记为加载结束
      isLoading = false;
      // 通知UI更新
      update();
    }
  }
}

• 第二步：在UI层使用GetBuilder监听Controller，根据isLoading状态决定渲染内容

// 首先要确保你的Controller已经完成注册，比如通过Get.put(MyDataController())注册过
GetBuilder<MyDataController>(
  builder: (controller) {
    // 加载状态时显示加载动画
    if (controller.isLoading) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
    // 加载完成后显示实际业务内容
    return YourCustomWidget(data: controller.responseData);
  },
)

补充说明 #

如果有多个不同接口的加载状态需要区分，可以在Controller中定义多个独立的isLoading变量（比如isLoadingList、isLoadingDetail等）分别管理即可。

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