如何使用 flutter 在 firestore 的卡片列表中显示我的结果

Question

我目前正在开发 flutter 应用程序。 在我的数据库中，我有一个集合，其中有文档。 每个文档都有一个子集合。 在那个集合中，我有两个文档。 邮政 1 和邮政 2。 我在获取数据并将其显示在卡片列表中时遇到问题：所以我想将它们显示在卡片列表中。 每张卡片的一侧有 post1 的数据，另一侧有 post2 的数据我用 futurebuilder 试过，但我就是做不到。 将不胜感激任何帮助。 我的 Firestore 数据库：

每个文件都有那个。 所以对于第二个文档，我也有相同的结构。 我显示列表的代码：

final generalreference = Firestore.instance.collection("General");
showpics() {
    return FutureBuilder (
        future: generalreference.getDocuments(),
        builder: (context,  querySnapshot) {
          if (!querySnapshot.hasData) {
            return Center(
                child: Text(
              "Loading...",
              style: TextStyle(
                fontFamily: "Montesserat",
                fontWeight: FontWeight.w700,
                fontSize: 40.0,
                fontStyle: FontStyle.italic,
              ),
            ));
          }
          List<PostList> postsresult = [];
          //QuerySnapshot eachitem = await generalreference.getDocuments(); \\ I am doing something wrong here
          querySnapshot.data.documents.forEach((element) async {
            DocumentSnapshot post1 = await  generalreference
                .document(element.documentID)
                .collection("posts")
                .document("post1")
                .get();
            Posts eachpost = Posts.fromDocument(post1);
            PostList postList = PostList(eachpost);
            postsresult.add(postList);
            //print("the posts is $postsresult");
          });
          print("the posts is $postsresult");

          return ListView(children: postsresult);
        });
  }

我的帖子列表 class：

class PostList extends StatelessWidget {
  final Posts picture1;
  PostList(this.picture1);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Card(
        elevation: 20.0,
        child: Column(children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              CircleAvatar(
                radius: 20.0,
                backgroundImage: NetworkImage(picture1.pic),
              ),

}

我的帖子 model

class Posts{
  final String uid;
  final String email;
  final String username;
  final String id;
  final String pic;

  Posts(  {
    this.uid,
    this.email,
    this.username,
    this.id,
    this.pic
  });

  factory Posts.fromDocument(DocumentSnapshot doc){
    return Posts(
      uid: doc['uid'],
      email: doc['email'],
      username: doc['username'],
      pic: doc['Pic'],
      id: doc.documentID   );
  }
}

我没有收到任何错误，我只是看不到我的照片

Answer 1

所以，我按照 Uni 的建议使用 listview.builder 解决了它，这解决了我的问题

Future<List<Post2>> getposts2() async {
    var eachdocument = await generalreference.getDocuments();
    List<Post2> posts = [];
    for (var document in eachdocument.documents) {
      DocumentSnapshot myposts = await generalreference
          .document(document.documentID)
          .collection("posts")
          .document("post2")
          .get();
      print(myposts['Pic']);
      Post2 post = Post2(myposts['Pic']);
      posts.add(post);
    }
    return posts;
  }

  showpics() {
    return FutureBuilder(
        future: Future.wait([getposts(), getposts2()]),
        builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
          if (!snapshot.hasData) {
            return Center(
                child: Text(
              "Loading...",
              style: TextStyle(
                fontFamily: "Montesserat",
                fontWeight: FontWeight.w700,
                fontSize: 40.0,
                fontStyle: FontStyle.italic,
              ),
            ));
          }
          return ListView.builder(
              itemCount: snapshot.data[0].length,
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  child: Card(
                    elevation: 20.0,
                    child: Column(children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          CircleAvatar(
                            radius: 20.0,
                            backgroundImage:
                                NetworkImage(snapshot.data[0][index].picture),
                          ),