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

Posted 2023-04-19

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

【英文标题】：how to build a card with list in flutter? [closed]

【发布时间】：2021-10-20 09:41:33

【问题描述】：

我是 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();
          ),
    ));
  
 

感谢您的帮助。

【参考方案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(),
  ),
);

【讨论】：

谢谢兄弟，它很有用

不客气。如果它有助于考虑将我的答案标记为已接受，谢谢。