使用 StreamBuilder 使用 Firestore 中的数据填充 flutter DataTable

Question

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

我收到的错误是'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. 这个错误显然表明我的数据表似乎有不一致的单元格和列数，但我不明白为什么会出现这种情况，因为我已经使用了每个单元格和列的三个。

这是我的代码：

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;
  }
}

预先感谢您的建议！

Answer 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，即“建议”、“姓名”、“投票”和“说唱歌手姓名”。在提供电池数量时，您提供的是 3 个电池。

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

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