【问题标题】：How to show loading spinner in GetBuilder如何在 GetBuilder 中显示加载微调器
【发布时间】：2021-12-05 00:37:32
【问题描述】：

在 FutureBuilder 中使用 API 时，您可以在此代码尚无数据时轻松显示加载微调器，

   if(snapshot.connectionState == ConnectionState.waiting){
          return Center(
                child: CircularProgressIndicator(),
                   );
                }

当使用 getx 作为状态管理库时，如何为 GetBuilder 做同样的事情？

【问题讨论】：

标签： flutter api dart

【解决方案1】：

这是一个基于isLoading bool 值重新构建的基本示例。我只是在更改 String 的值，但这应该让您了解在 GetX 函数中进行适当的 API 调用并显示指标。虽然我通常默认尽可能使用GetBuilder，但显示加载指示器我通常只使用Obx，因此我不必调用update() 两次。

class TestController extends GetxController {
  bool isLoading = false;

  String data = '';

  Future<void> fetchData() async {
    isLoading = true;
    update(); // triggers the GetBuilder rebuild
    await Future.delayed(
      const Duration(seconds: 2),
      () => data = 'Data Loaded',
    );
    isLoading = false;
    update();
  }
}

您可以通过将其放入Column 来测试它。只要确保控制器在某个时候首先使用Get.put(TestController());进行初始化

            GetBuilder<TestController>(
                builder: (controller) => controller.isLoading
                    ? CircularProgressIndicator()
                    : Text(controller.data)),
            ElevatedButton(
              onPressed: () => controller.fetchData(),
              child: Text('Fetch Data'),
            ),

如果您不想手动调用该函数，您也可以丢失 isLoading 布尔值，使用 FutureBuilder 但只需从 GetX 类传递 Future 函数即可将该逻辑排除在您的之外用户界面。

更新

这是一个使用来自 Kanye 随机引用的实时虚拟数据的示例 https://api.kanye.rest 将下面的代码复制到您的 IDE 中并运行它应该是有意义的。

基本ApiCaller类

class ApiCaller extends GetConnect {
  final url = 'https://api.kanye.rest';
  Future<String> fetchData() async {
    final response = await httpClient.get(url);
    return response.body['quote'] as String;
  }
}

更新TestController类

class TestController extends GetxController {
  String data = 'no data';
  bool isLoading = false;

  Future<void> updateData() async {
    _updateIsLoading(true);
    final apiCaller = ApiCaller();
    await Future.delayed(
      const Duration(seconds: 1),
      () => data = 'Data Loaded',
    ); // just to add more visible time with loading indicator
    data = await apiCaller.fetchData();
    _updateIsLoading(false);
  }

  void _updateIsLoading(bool currentStatus) {
    isLoading = currentStatus;
    update();
  }
}

GetBuilder 和 FutureBuilder 的示例

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = Get.put(TestController());
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              FutureBuilder(
                future: ApiCaller().fetchData(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text('FutureBuilder: ${snapshot.data}');
                  } else {
                    return CircularProgressIndicator();
                  }
                },
              ),
              GetBuilder<TestController>(
                builder: (_) => controller.isLoading
                    ? CircularProgressIndicator()
                    : Text('GetBuilder: ${controller.data}'),
              ),
              ElevatedButton(
                onPressed: () => controller.updateData(),
                child: Text('Update GetBuilder'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

带有 GetX 类函数的 FutureBuilder 示例

【讨论】：

请给我一个代码说明你想在这里解释什么？
查看更新的答案