使用 StreamBuilder 使用 Firestore 中的数据填充颤振 DataTable答案

【问题标题】：Populate a flutter DataTable with data from Firestore using a StreamBuilder使用 StreamBuilder 使用 Firestore 中的数据填充颤振 DataTable
【发布时间】：2021-01-06 17:31:34
【问题描述】：

我正在尝试使用 Flutter 中的 StreamBuilder 来使用 Firestore 中的数据动态填充 DataTable。 Gustavo 提出了类似的问题，这很有帮助，但我似乎仍然无法让我的代码正常工作。

我收到的错误是'package:flutter/src/material/data_table.dart': Failed assertion: line 429 pos 15: '!rows.any((DataRow row) => row.cells.length != columns.length)': is not true。此错误显然表明我的 DataTable 的单元格和列数似乎不一致，但我不明白为什么会出现这种情况，因为我每个都使用了三个。

这是我的代码：

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

class SkillsMatrixOverall extends StatefulWidget {
  @override
  _SkillsMatrixOverallState createState() => _SkillsMatrixOverallState();
}

@override
class _SkillsMatrixOverallState extends State<SkillsMatrixOverall> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Baby Name Votes')),
      body: new StreamBuilder(
        stream: FirebaseFirestore.instance.collection('baby').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) return new Text('Loading...');
          return new DataTable(
            columns: <DataColumn>[
              new DataColumn(
                label: Text('Suggestions'),
              ),
              new DataColumn(label: Text('Name')),
              new DataColumn(label: Text('Votes')),
              new DataColumn(label: Text('Rapper name')),
            ],
            rows: _createRows(snapshot.data),
          );
        },
      ),
    );
  }

  List<DataRow> _createRows(QuerySnapshot snapshot) {
    List<DataRow> newList =
        snapshot.docs.map((DocumentSnapshot documentSnapshot) {
      return new DataRow(cells: [
        DataCell(Text(documentSnapshot.data()['Name'].toString())),
        DataCell(Text(documentSnapshot.data()['Votes'].toString())),
        DataCell(Text(documentSnapshot.data()['Rapper name'].toString())),
      ]);
    }).toList();

    return newList;
  }
}

提前感谢您的建议！

【问题讨论】：

标签： flutter

【解决方案1】：

我不知道你有没有注意到，但是你的代码中的列数是 4，而单元格数是 3。你可以看到

columns: <DataColumn>[
              new DataColumn(
                label: Text('Suggestions'),
              ),
              new DataColumn(label: Text('Name')),
              new DataColumn(label: Text('Votes')),
              new DataColumn(label: Text('Rapper name')),
            ],

这里的列数是 4、Suggestion、Name、Votes 和 Rapper Name。在提供电池数量的同时，您提供 3 个电池。

return new DataRow(cells: [
        DataCell(Text(documentSnapshot.data()['Name'].toString())),
        DataCell(Text(documentSnapshot.data()['Votes'].toString())),
        DataCell(Text(documentSnapshot.data()['Rapper name'].toString())),
      ]);

如果您查看您的代码，就会发现列数和单元格数不匹配。

【讨论】：