在 DataTable 中使用 flutter 显示 firestore 数据

Question

我正在尝试Flutter 官方文档中的Firebase for Flutter示例应用程序，并使用“DataTable”更改了“ListTile”小部件，现在 DataTable 正在为每个 DataRow 打印一个单独的数据列。\n\xe2\x80\x8e\xe2 \x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80 \x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e \xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2 \x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80 \x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e \xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2 \x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80 \x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\n请查看当前输出屏幕截图和数据库 la\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80 \x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8eyout。\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\n\xe2\x80\x8e\xe2\ x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\ x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\ xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\ x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\ x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\ xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e\xe2\x80\x8e

\n

    import \'package:cloud_firestore/cloud_firestore.dart\';\n    import \'package:flutter/material.dart\';\n\n    void main() => runApp(MyApp());\n\n    class MyApp extends StatelessWidget {\n      @override\n      Widget build(BuildContext context) {\n        return MaterialApp(\n          title: \'Baby Names\',\n          home: MyHomePage(),\n        );\n      }\n    }\n\n    class MyHomePage extends StatefulWidget {\n      @override\n      _MyHomePageState createState() {\n        return _MyHomePageState();\n      }\n    }\n\n    class Record {\n      final String name;\n      final String rName;\n      final int votes;\n      final DocumentReference reference;\n\n      Record.fromMap(Map<String, dynamic> map, {this.reference})\n          : assert(map[\'name\'] != null),\n            assert(map[\'r_name\'] != null),\n            assert(map[\'votes\'] != null),\n            name = map[\'name\'],\n            rName = map[\'r_name\'],\n            votes = map[\'votes\'];\n\n      Record.fromSnapshot(DocumentSnapshot snapshot)\n          : this.fromMap(snapshot.data, reference: snapshot.reference);\n\n      @override\n      String toString() => "Record<$name:$votes:$rName>";\n    }\n\n    class _MyHomePageState extends State<MyHomePage> {\n      @override\n      Widget build(BuildContext context) {\n        return Scaffold(\n          appBar: AppBar(title: Text(\'Baby Name Votes\')),\n          body: _buildBody(context),\n        );\n      }\n\n      Widget _buildBody(BuildContext context) {\n        return StreamBuilder<QuerySnapshot>(\n          stream: Firestore.instance.collection(\'baby\').snapshots(),\n          builder: (context, snapshot) {\n            if (!snapshot.hasData) return LinearProgressIndicator();\n\n            return _buildList(context, snapshot.data.documents);\n          },\n        );\n      }\n\n      Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {\n        return ListView(\n          padding: const EdgeInsets.only(top: 20.0),\n          children: snapshot.map((data) => _buildListItem(context, data)).toList(),\n        );\n      }\n\n      Widget _buildListItem(BuildContext context, DocumentSnapshot data) {\n        final record = Record.fromSnapshot(data);\n\n        return Padding(\n          key: ValueKey(record.name),\n          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),\n          child: Container(\n            decoration: BoxDecoration(\n              border: Border.all(color: Colors.grey),\n              borderRadius: BorderRadius.circular(5.0),\n            ),\n            child: DataTable(\n              columns: [\n                DataColumn(label: Text(\'Name\')),\n                DataColumn(label: Text(\'Votes\')),\n                DataColumn(label: Text(\'Rapper\\nname\')),\n              ],\n              rows: [\n                DataRow(cells: [\n                  DataCell(Text(record.name)),\n                  DataCell(Text(record.votes.toString())),\n                  DataCell(Text(record.rName)),\n                ])\n              ],\n            ),\n          ),\n        );\n      }\n    }\n

\n

Answer 1

从代码中可以看出，很明显您正在返回全新的 DataTable，因此您每次都会获取列名称。

您必须在 _buildBody 方法中创建数据表，然后从 _buildListItem 方法返回 DataRow 列表。

我希望以下代码对您有用。由于没有正确的设置，我没有测试下面的代码。如果您再次遇到任何问题，请添加评论。

Widget _buildBody(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('baby').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return LinearProgressIndicator();

        return DataTable(
          columns: [
            DataColumn(label: Text('Name')),
            DataColumn(label: Text('Votes')),
            DataColumn(label: Text('Rapper\nname')),
          ],
          rows: _buildList(context, snapshot.data.documents)
        );
      },
    );
  }




    List<DataRow> _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
        return  snapshot.map((data) => _buildListItem(context, data)).toList();
    }



 DataRow _buildListItem(BuildContext context, DocumentSnapshot data) {
    final record = Record.fromSnapshot(data);

    return DataRow(cells: [
              DataCell(Text(record.name)),
              DataCell(Text(record.votes.toString())),
              DataCell(Text(record.rName)),
            ]);
  }