如何在颤动中构建带有列表的卡片？ [关闭]

Question

我是 Flutter 的初学者，但我遇到了问题。 我想从firebase调用数据。 [][1] [1]：https://i.stack.imgur.com/4sA39.png

目标是每封邮件都在一张卡片中，但所有邮件都出现在一张大卡片中。 这是我的代码

'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),
                  child: Card(
                      child: ListView(
                    children: snapshot.data!.docs
                        .map((e) => Column(
                              children: [
                                ListTile(title: Text(e['email'])),
                              ],
                            ))
                        .toList(),
                  )));
            }
            return Container();
          }),
    ));
  }
 }

感谢您的帮助。

Answer 1

您的代码创建了一个Card，其中包含一个ListView 和ListTiles，这就是您拥有一张包含所有数据的卡片的原因。

如果您希望ListView 中的Card 小部件，每个Card 都包含ListTitle 和电子邮件，请尝试使用StreamBuilder 中的以下代码：

return Padding(
  padding: const EdgeInsets.only(top: 8.0),
  child: ListView(
    children: snapshot.data!.docs.map((e) {
      return Card(
          child: Column(children: [
        ListTile(title: Text(e["name"]))
      ]));
    }).toList(),
  ),
);

但你并不真正需要Column，只要你会在那里添加更多数据。如果您只需要电子邮件，那就更简单了：

return Padding(
  padding: const EdgeInsets.only(top: 8.0),
  child: ListView(
    children: snapshot.data!.docs.map((e) {
      return Card(
          child: ListTile(title: Text(e["name"])));
    }).toList(),
  ),
);