Flutter 在颤振中将数据从API加载到ListView时加载微调器

我正在从internet获取数据并将其显示在ListView中，数据加载首先需要一点时间，我想在数据加载时添加一个加载微调器。这是ListView：

            Expanded(
                child:
                ListView.builder(
                    itemCount:this.data.length ,
                    itemBuilder: (context, index) {
                      return _specialistsCardInfo() ;
                    }
                )
            ),

---

如何以及在何处添加加载微调器？

您可以这样做<代码>数据。列表表示这是您的数据

if(data.list == null) CircularProgressIndicator(),
Expanded(
                child:
                ListView.builder(
                    itemCount:this.data.length ,
                    itemBuilder: (context, index) {
                      return _specialistsCardInfo() ;
                    }
                )
            ),

---

您可以在有状态的小部件中执行此操作

class CardsPage扩展StatefulWidget{
//.....
}
类CardsPageState扩展状态{
bool isLoading=true；
Future fetchData（）异步{
//获取数据的代码
等待。。。
//已完成数据提取
设置状态（）{
isLoading=false；
});
}
@凌驾
void initState（）{
//调用fetchdata方法
fetchData（）；
}
@凌驾
小部件构建（）{
返回卸载？
中心（子项：循环压缩机指示器（））：
扩大(
子项：ListView.builder(
itemCount:this.data.length，
itemBuilder：（上下文，索引）{
返回_specialistcardinfo（）；
}
)
);
}
}

它的工作原理

isLoading=true

因此当我们进入页面时，我们将看到加载微调器。

---

在获取数据之后，我们

设置state

isLoading=false

，因此

build（）

方法返回您的ListView而不是微调器。

首先获取一个bool并将其命名为

isLoading

，默认情况下，bool的值为false并在点击api时将该值设置为true，一旦获得结果，将

isLoading

设置为false
让代码：

bool isLoading = false;

isLoading
? CircularProgressIndicator
: Expanded(
    child: ListView.builder(
      itemCount: this.data.length,
      itemBuilder: (context, index) {
        return _specialistsCardInfo();
      },
    ),
  );

从Api获取数据：

myMethod(context){
    setState(() {
      isLoading = true;
    });

    //Hit Api

    setState(() {
      isLoading = false;
    });

    // Api Response is here

  }

---

使用FutureBuilder。这太棒了！但是您可以在默认情况下设置

isLoading=true

，这样就可以避免第一个

setState

。然后小部件将只重建一次而不是两次。非常感谢Akora，但我更喜欢将默认isLoading设置为false，这样默认情况下它总是false。只有当api命中时，才为真。：）