Question

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

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

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

Answer 1

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

# lease dates
start = json_obj['lease'][0]['start']
end = json_obj['lease'][0]['end']

print(end, start)
2026-10-31 2020-10-07

startdt = datetime.strptime(start, '%Y-%m-%d')
print(startdt)
2020-10-07 00:00:00 

enddt = datetime.strptime(end, '%Y-%m-%d')
print(enddt)
2026-10-31 00:00:00


# Total months
calc = relativedelta.relativedelta(enddt, startdt)
calc.days
24

calc.months
0

工作方式

class CardsPage extends StatefulWidget { //..... } class CardsPageState extends State<CardsPage> { bool isLoading = true; Future<void> fetchData() async { // Code to fetch your data await ... // Finished fetching data setState(() { isLoading = false; }); } @override void initState() { // Call the fetch data method fetchData(); } @override Widget build() { return isLoading ? Center(child: CircularProgressIndicator()) : Expanded( child: ListView.builder( itemCount:this.data.length , itemBuilder: (context, index) { return _specialistsCardInfo() ; } ) ); } }，所以当我们进入页面时，我们将看到正在加载的微调器。
提取数据后，我们isLoading = true setState使isLoading = false方法返回您的ListView而不是微调框。

Answer 2

您可以执行此操作！ data.list就是您的数据！

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

Answer 3

首先获取一个布尔并将其命名为isLoading，默认情况下，布尔值是 false ，并在您点击api，并在获得结果后立即将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

  }

加载微调器，同时将数据从API加载到Flutter中的ListView中

3 个答案: