从 Firestore 中的文档检索数组数据

Question

这是我的 firebase 设置。

我现在面临的问题是如何使用streambuilder和listview检索文档中的数组数据item_detail并显示这样的输出

我浏览了许多有关 Streambuilder 的网站，但找不到我想要的解决方案 可以这样做吗？

非常感谢您的惠顾。

错误

Answer 1

您可以通过将此代码传递给的参数来使用 aStreamBuilder来获取数据：streamStreamBuilder

FirebaseFirestore.instance.collection('lists').doc(documentId).snapshots()

它返回一个Streamof DocumentSnapshot，您可以通过调用 从中获取数据.data()。

这将返回一个Map<String, dynamic>对象，您可以通过获取 field 从中获取数组中的项目item_detail。

这将返回一个可以在ListView小部件中使用的列表。

查看下面的代码，它执行上述操作并实现您问题中的 UI。

    StreamBuilder<DocumentSnapshot>(
            stream: FirebaseFirestore.instance
                .collection('lists')
                .doc(documentId)
                .snapshots(),
            builder:
                (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
              if (snapshot.data == null) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
    
              final DocumentSnapshot document = snapshot.data;
    
              final Map<String, dynamic> documentData = document.data();

              if (documentData['item_detail'] == null) {
                return Text('No item now');           
              }

              final List<Map<String, dynamic>> itemDetailList =
                  (documentData['item_detail'] as List)
                      .map((itemDetail) => itemDetail as Map<String, dynamic>)
                      .toList();
    
              return ListView.builder(
                itemCount: itemDetailList.length,
                itemBuilder: (BuildContext context, int index) {
                  final Map<String, dynamic> itemDetail = itemDetailList[index];
                  final String name = itemDetail['name'];
                  final String quantity = itemDetail['quantity'];
                  final String price = itemDetail['price'];
                  final DateTime date = (itemDetail['date'] as Timestamp).toDate();
    
                  return Card(
                    color: Colors.yellow,
                    child: Row(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            color: Colors.orange,
                            shape: BoxShape.circle,
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(16.0),
                            child: Text(
                              '${date.day}/${date.month.toString().padLeft(2, '0')}',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              SizedBox(
                                height: 4.0,
                              ),
                              Text(
                                name.toUpperCase(),
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 20.0,
                                ),
                              ),
                              SizedBox(
                                height: 4.0,
                              ),
                              Text('Quantity: $quantity'),
                              SizedBox(
                                height: 4.0,
                              ),
                              Text('Total price: $price'),
                              SizedBox(
                                height: 4.0,
                              ),
                            ],
                          ),
                        ),
                        IconButton(
                          icon: Icon(Icons.delete, color: Colors.red,),
                          onPressed: () {},
                        ),
                      ],
                    ),
                  );
                },
              );
            },
          ),