Firebase Firestore数据在Flutter StreamBuilder中仅显示一条的原因

原因 #

你代码里的问题出在for循环中直接使用return：当第一次循环执行到return Card(...)时，整个builder函数就会立即返回第一个Card组件，后续的循环迭代根本不会触发，所以界面只会显示第一条数据。

修复方案 #

你需要用列表组件（比如ListView）来渲染所有数据，而不是在循环里直接return。以下是两种可行的修复方式：

方式一：使用ListView.builder（推荐，性能更优）

Container(
  height: 250,
  child: StreamBuilder(
    stream: db.collection("DebrisPeoples").snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return Text("yükleniyor");
      } else {
        final List<DebrisPeopleModel> data = snapshot.data!.docs
            .map((e) => DebrisPeopleModel.fromDocument(e))
            .toList();

        inspect(data);
        return ListView.builder(
          itemCount: data.length,
          itemBuilder: (context, index) {
            final item = data[index];
            return Card(
              child: ListTile(
                title: Text(item.nameSurname.toString()),
              ),
            );
          },
        );
      }
      return Container();
    },
  ),
),

方式二：先生成Widget列表再用ListView包裹

Container(
  height: 250,
  child: StreamBuilder(
    stream: db.collection("DebrisPeoples").snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return Text("yükleniyor");
      } else {
        final List<DebrisPeopleModel> data = snapshot.data!.docs
            .map((e) => DebrisPeopleModel.fromDocument(e))
            .toList();

        inspect(data);
        final List<Widget> cardList = [];
        for (var item in data) {
          cardList.add(Card(
            child: ListTile(
              title: Text(item.nameSurname.toString()),
            ),
          ));
        }
        return ListView(children: cardList);
      }
      return Container();
    },
  ),
),

说明 #

ListView是Flutter专门用于渲染列表数据的组件，它会遍历所有数据并渲染对应的子组件，不会像你之前的写法那样提前中断函数执行。如果列表数据较多，推荐使用ListView.builder，它会按需渲染可见区域的组件，提升性能。

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