Отображение данных пожарного депо с трепетом в DataTable

Question

Я пробовал приложение Firebase для Flutter из официальной документации Flutter и изменил виджет «ListTile» с помощью «DataTable», и теперь DataTable печатает отдельный столбец данных для каждой строки данных.

пожалуйста, просмотрите Выходной скриншот , чтобы увидеть проблему, так как мои навыки объяснения и программирования оба дерьма! Спасибо за ваше время.

• Структура базы данных

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

Answer 1

Как видно из вашего кода, ясно, что вы возвращаете совершенно новый DataTable, и из-за этого вы каждый раз получаете имя столбца.

Вы должны создать Datatable в методе _buildBody и просто вернуть Список DataRow из метода _buildListItem.

Я надеюсь, что следующий код сработает для вас. я не тестировал приведенный ниже код из-за отсутствия надлежащей настройки. добавьте комментарий, если у вас снова возникнут проблемы.

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




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



 List<Widget> _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)),
            ]);
  }