Flutter如何实现从Firebase拉取数据生成每张含单条邮箱的独立Card列表

问题原因 #

你当前的代码将Card组件放在了ListView的外层，所有遍历生成的邮箱列表项都被容纳在同一个Card容器中，所以最终所有邮箱都会显示在同一张大卡片里。

修正方案 #

把Card移动到数据遍历的逻辑内部，每读取一条Firebase的学生数据，就生成一个独立的Card组件，再将所有Card作为ListView的子项渲染即可，修正后代码如下：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final Stream<QuerySnapshot> collectionReference =
      FirebaseFirestore.instance.collection('students').snapshots();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          child: StreamBuilder(
              stream: collectionReference,
               builder: (BuildContext context,
                AsyncSnapshot<QuerySnapshot> snapshot) {
               if (snapshot.hasData) {
             return Padding(
                 padding: const EdgeInsets.only(top: 8.0),
                 // 移除外层的Card，将Card放到遍历逻辑内部
                 child: ListView(
                   children: snapshot.data!.docs
                       .map((e) => Card( // 每条数据对应生成一个独立Card
                             child: ListTile(title: Text(e['email'])),
                           ))
                       .toList(),
                 ));
           }
           return Container();
         }),
   ));
 }
}

如果需要优化视觉效果，调整卡片之间的间距，可以给Card添加margin参数，示例：

Card(
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  child: ListTile(title: Text(e['email'])),
)

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