如何从 fire 存储中获取多行并显示在数据 Table --FLUTTER

Question

我在 firestore 上有一个名为“CASHOUT”的集合，其中包含字段 Random1、2 和 3。

我能够在数据 table 小部件

中成功获取和显示

但是当我创建另一个具有相同字段的文档时

**它给我一个错误

rows.cells.length != columns.length

**

我做错了什么？？这是代码

            StreamBuilder(
              stream: _firestore.collection('CASHOUT').snapshots(),
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return const Text('Something went wrong');
                }

                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Text("Loading");
                }

                if (snapshot.hasData) {
                  List<DataCell> displayedDataCell = [];

                  for (var item in snapshot.data!.docs) {
                    displayedDataCell.add(
                      DataCell(
                        Text(
                          item['RANDOM1'].toString(),
                        ),
                      ),
                    );
                    displayedDataCell.add(
                      DataCell(
                        Text(
                          item['RANDOM2'].toString(),
                        ),
                      ),
                    );
                    displayedDataCell.add(
                      DataCell(
                        Text(
                          item['RANDOM3'].toString(),
                        ),
                      ),
                    );
                  }

                  return FittedBox(
                    child: DataTable(
                      columns: const <DataColumn>[
                        DataColumn(
                          label: Text(
                            'Date',
                          ),
                        ),
                        DataColumn(
                          label: Text(
                            'Amount',
                          ),
                        ),
                        DataColumn(
                          label: Text(
                            'Optional Detail',
                          ),
                        ),
                      ],
                      rows: <DataRow>[
                        DataRow(cells: displayedDataCell),
                      ],
                    ),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),

Answer 1

您收到此错误是因为您正在创建一个 DataRow 的单元格中有 6 个项目，而您必须创建 2 个 DataRow 有 3 个单元格。

rows: <DataRow>[
  for (int i = 0; i < displayedDataCell.length; i += 3)
    DataRow(cells: [displayedDataCell[i], displayedDataCell[i + 1], displayedDataCell[i + 2]])
],

Answer 2

当您将数据添加到 displayedDataCell 时，您将不同的行添加到 table 导致此错误。

一行中列出的数据数量必须与列中的数量相匹配。 因此，无需创建数据单元格列表，只需为 DataTable 行中的每个数据添加一行

首先获取数据

Map<String, dynamic> data = document.data() as Map<String, dynamic>;

然后用这个替换你的数据行table然后它会自动更新

                  <DataRow>[
                        DataRow(
                          cells: <DataCell>[
                            DataCell(
                              Text(
                                item['RANDOM1'].toString(),
                              ),
                            ),
                            DataCell(
                              Text(
                                item['RANDOM2'].toString(),
                              ),
                            ),
                            DataCell(
                              Text(
                                item['RANDOM3'].toString(),
                              ),
                            ),
                          ],
                        ),
                      ],