Question

我正在获取数据列表，我想在其余项目正在加载时，在“将来”构建器的列表视图中显示已加载的项目，这可能吗？

我在ListView Builder中有一个FutureBuilder，Api调用获取15个项目并分配给此处的列表FinalDataList

 @override
 Widget build(BuildContext context){

  return Scaffold(
    appBar: AppBar(
    title: Text('All Artworks',textAlign: TextAlign.center,style: TextStyle(fontWeight: FontWeight.bold)),
    centerTitle: true,
    backgroundColor: Theme.of(context).primaryColor,
    ),

    body:  FutureBuilder(
        future: dataFuture,
        builder: (context,snapshot){
         if(finalDataList.length > 0){

          return RefreshIndicator(
              onRefresh: (){
                this._showToast(context);
                return this.refreshHomePage();

              },

              child:  ListView.builder(
                    scrollDirection: Axis.vertical,
                    itemCount: finalDataList!=null?finalDataList.length:0,
                    itemBuilder: (BuildContext context, int index){
                        return new Card(

                           child: Text(finalDataList[index]['title']),
                        );
                       },
                      ),
                     );

      }else{

         return new  Center(
              child: new CircularProgressIndicator(
              valueColor: new AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
            ),
           );
        }

       }
   ),
 );

现在发生的是列表的整个窗口小部件，其中包含15个项目，只有在全部加载后才显示。如何在其余项目加载时首先显示已加载的项目？

Answer 1

您可以拥有一个期货列表，并使用ListView.builder来分别等待每个期货。

ListView.builder(
  itemCount: futureList.length,
  itemBuilder: (context, index) => FutureBuilder(
    future: futureList[index],
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return CircularProgressIndicator(...);
      } else {
        return Center(...);
      }
    },
  ),
),

如何将dataFuture转换为futureList将首先取决于您创建dataFuture的精确程度。

在Flutter Future Builder中加载其余项目时，如何在列表中显示已加载项目？

1 个答案: