Flutter如何基于Firestore条件查询返回的文档快照构建ListView？

你现有代码的问题是遍历查询快照时直接给单个变量赋值，每次遍历都会覆盖上一条文档的数据，最终只能保留最后一条文档的内容，无法存储所有符合条件的条目，可按以下步骤实现需求：

1. 定义存储数据的列表 #

在你的State类中先声明一个列表，用来存储所有符合条件的子文档数据：

// 可以直接用Map列表，也可以单独定义Child模型类让代码更规范
List<Map<String, dynamic>> childrenList = [];

2. 修正快照监听逻辑 #

修改原有的监听代码，把所有查询到的文档存入列表，而不是覆盖单个变量：

FirebaseFirestore.instance
    .collection("children")
    .where("parentUID", isEqualTo: uid)
    .snapshots()
    .listen((result) {
      // 每次拿到新快照先清空旧数据，避免重复累加
      childrenList.clear();
      for (var doc in result.docs) {
        childrenList.add({
          "childFirstName": doc["childFirstName"],
          "childLastName": doc["childLastName"],
          "points": doc["points"],
          "docID": doc.id,
        });
      }
      // 统一触发一次重绘即可，不需要在循环内多次调用setState
      setState(() {});
    });

3. 构建ListView #

在你的build方法中使用ListView.builder动态渲染列表项：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: childrenList.isEmpty
        ? const Center(child: Text("暂无关联的孩子信息"))
        : ListView.builder(
            itemCount: childrenList.length,
            itemBuilder: (context, index) {
              final child = childrenList[index];
              return ListTile(
                title: Text("${child["childFirstName"]} ${child["childLastName"]}"),
                subtitle: Text("积分：${child["points"]}"),
                trailing: Text("文档ID：${child["docID"]}"),
                // 可按需添加点击事件等自定义逻辑
                onTap: () {
                  // 点击列表项的处理逻辑
                },
              );
            },
          ),
  );
}

可选优化方案：使用StreamBuilder #

你也可以不用手动管理监听和setState，直接用Flutter提供的StreamBuilder组件实现更简洁的代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance
          .collection("children")
          .where("parentUID", isEqualTo: uid)
          .snapshots(),
      builder: (context, snapshot) {
        if (snapshot.hasError) return const Center(child: Text("加载失败"));
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        final childrenList = snapshot.data!.docs;
        return ListView.builder(
          itemCount: childrenList.length,
          itemBuilder: (context, index) {
            var doc = childrenList[index];
            return ListTile(
              title: Text("${doc["childFirstName"]} ${doc["childLastName"]}"),
              subtitle: Text("积分：${doc["points"]}"),
            );
          },
        );
      },
    ),
  );
}

内容的提问来源于stack exchange，提问作者user14431894