等待一个函数在 ListView 中完成

Question

由于 Firestore 请求，我需要等待我的功能在 ListView 中完成。我尝试使用 Future.wait() 但它不起作用。

FutureBuilder<QuerySnapshot>(
                    future: FirebaseFirestore.instance
                        .collection('Statements')
                        .where('userID',isEqualTo: context.watch<User>().uid)
                        .get(),
                    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
                      if (snapshot.hasError) {return Text("Erreur");}
                      if (snapshot.connectionState == ConnectionState.waiting) {
                        return Text("Loading");}
                      return Expanded(
                        child:ListView.builder(
                          itemCount: snapshot.data.docs.length,
                            itemBuilder: (context, index) {
                              DocumentSnapshot document = snapshot.data.docs[index];
                              Future.wait([getStatementData(document)]);
                              return StatementCard(statement:selectedStatement,
                                           accommodation : relatedAccommodation,
                                           owner : relatedOwner);
                            },
                        )

这是调用的函数：

Future getStatementData(document)  async {

    selectedStatement = Statement.fromFirebase(document);

    document.data()["accommodation"].get().then((value) {
      relatedAccommodation = Accommodation.fromFirebase(value);});

     await FirebaseFirestore.instance
         .collection('Owners')
         .doc(document["ownerList"][0])
         .get().then((value) {
           print(value.data());
           relatedOwner = Owner.fromFirebase(value);
     });

  }

我应该使用另一个未来的构建器吗？

Answer 1

你应该通过在里面返回另一个 Future Builder 来做到这一点：

   ListView.builder(
          itemCount: snapshot.data.docs.length,
          itemBuilder: (context, index) {
         DocumentSnapshot document = snapshot.data.docs[index];
        return  FutureBuilder(
      future: getStatementData(document) ,
      builder: (context, snapshot) {
        return snapshot.connectionState == ConnectionState.done
               ? StatementCard(statement:selectedStatement,
                accommodation : relatedAccommodation,
                 owner : relatedOwner);
               : Container(); 
    );
      },
         )

Answer 2

我认为您只是错过了一件简单的事情，FutureBuilder 也有一个您可以访问的 connectionstate.done 状态。这会等到你未来的功能完成。

return FutureBuilder(
            future: yourFunction,
            builder: (context, snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return Center(child: Text('No status',);
                  break;
                case ConnectionState.waiting:
                  return Center(child: CircularProgressIndicator());
                  break;
                case ConnectionState.done:
                return Text('Im done!') // Your listviewbuilder comes here
                  break;
                default:
              }
            }, 
          ),

文档：https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html 带有 ListViewBuilder 的 FutureBuilder 示例：https://medium.com/nonstopio/flutter-future-builder-with-list-view-builder-d7212314e8c9

[...]connectionState.done = [future] 不为空，并且已经完成。如果未来成功完成，[AsyncSnapshot.data] 将设置为未来完成的值。如果它完成时出现错误，[AsyncSnapshot.hasError] 将为真并且 [AsyncSnapshot.error] 将被设置为错误对象。[...]

等待一个函数在 ListView 中完成

Wait a function to be done in ListView

flutter

listview

google-cloud-firestore

flutter-futurebuilder