FLUTTER：在构建 listview.builder 时显示加载指示器答案

【问题标题】：FLUTTER : Displaying a loading indicator while listview.builder is buildingFLUTTER：在构建 listview.builder 时显示加载指示器
【发布时间】：2021-09-07 14:52:36
【问题描述】：

点击“打开列表”按钮时，应用会创建一系列列表以供将来显示。我发现当列表中的项目数量增加时，这些计算可能需要一点时间（2、3 秒）。因此，为了获得更好的用户体验，我想添加类似于加载指示器的内容，告诉用户“正在准备列表”。在我的应用程序中，我使用包加载指示器：它工作正常。所以我想在这种情况下使用它。这就是我所做的：

我将创建函数的“void”列表转换为“Future Void”。
我在插入“OPEN LIST BUTTON”的函数中添加了 async 关键字。

但是……由于某种原因，它从不显示加载指示器……

这是代码（UI 部分）：

 onMenuOuvrir: () async {
                      DialogBuilder(context).showLoadingIndicator(
                          text: 'Ouverture de la liste', color: Colors.black45);

                      uD.setSelectedCarnetList(
                          index, uD.userInfo!.carnetList![index].ref!);
                      await uD.getListReady();
                      DialogBuilder(context).hideOpenDialog();
                      Navigator.pushReplacementNamed(
                          context, EditCarnetScreen.id);
                    },

这是代码（提供者/后端部分）：

 Future<void> getListReady() async {
    await createBufferCarnetWordBank();
    await createBufferCarnetList();
    await createBufferGrammarList();
    await createBufferLevelList();
    setEditMode(false);
    clearSearchList();
  }

函数“createBuffer...List”都是 Future 类型。

我做错了什么？

我实际上发现问题出在其他地方......不是在创建列表，而是在 EditCarnetScreen 中构建“listview.builder”。

所以现在的问题是……我们如何在处理此任务时显示某种指示器……它似乎是“在屏幕之间”……

【问题讨论】：

标签： flutter dart asynchronous

【解决方案1】：

在单独的 dart 文件中创建一个小部件：

import 'package:flutter/material.dart';
Loading(BuildContext context) {
return showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    return Center(
      child: CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
      ),
    );
  });
 }

然后在代码中的任何地方使用它：

 Loading(context)

只要你愿意，就可以解雇：

Navigator.of(context).pop()

【讨论】：

【解决方案2】：

您可以为此使用FutureBuilder 小部件，例如

FutureBuilder(future: Provider.of<//your provider>(context)getListReady(), builder: (context, snapshot) => snapshot.connectionState == ConnectionState.waiting ? Center(child: CircularProgressIndicator()) : //your widget)

【讨论】：

感谢您的帮助，但它似乎也不起作用。我开始怀疑我们是否可以将 ASYNC 与计算功能一起使用，而不涉及 API、下载、上传等......

【解决方案3】：

如果您在主线程中处理计算，即使指示器显示 UI 冻结并且旋转动画也会延迟。

您可以通过Isolates 处理繁重的任务。搜索Isolate或compute的dart方法。

【讨论】：

谢谢 :) 我实际上发现问题来自其他地方....你能看看问题的编辑版本吗？
你能展示你的listview.builder函数吗？它不应该超过几分之一秒。

【解决方案4】：

我使用了 fluttertoast: ^8.0.8 包，如下所示。如果需要，您可以将吐司长度设置为更长的持续时间。 FutureBuilder 在您的小部件本身需要很长时间渲染的情况下没有用。 FutureBuilder 在获取小部件所需的数据时很有用。

@override

Widget build(BuildContext context) {
    Fluttertoast.showToast(
      msg: 'Loading...'
    );
    //Code for your complex widget here
  }

【讨论】：