如何在带有颤动的firestore中的卡片列表中显示我的结果答案

【问题标题】：How to display my results in a list of cards from firestore with flutter如何在带有颤动的firestore中的卡片列表中显示我的结果
【发布时间】：2020-09-29 14:15:10
【问题描述】：

我目前正在开发一个颤振应用程序。在我的数据库中，我有一个集合，其中有文档。每个文档都有一个子集合。在那个集合中，我有两个文件。邮政 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);
        });
  }

我的 PostList 类：

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),
              ),

}

我的帖子模型

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   );
  }
}

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

【问题讨论】：

为此使用 listview.builder 看看：flutter.dev/docs/cookbook/lists/long-lists
你能给我举个例子吗？我对颤动很陌生。但我会检查一下。谢谢你的评论
@Uni 谢谢你解决了我的问题
不客气。祝你好运！

标签： database firebase flutter dart google-cloud-firestore

【解决方案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),
                          ),

【讨论】：