Question

我目前正在开发一款Flutter应用程序。在我的数据库中，我有一个集合，在其中我有文档。每个文档都有一个子集合。在那个集合中，我有两个文件。 Post1和Post2。我在获取数据并将其显示在卡列表中时遇到问题：所以我想在卡列表中显示它们。每张卡的一侧都有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   );
  }
}

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

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

如何在扑朔迷离的Firestore卡片列表中显示我的结果

1 个答案: