flutter - 如何动态地将列添加到 DataTable？

Question

在我的项目中，我有一个DataTable，用户可以在其中输入数据。到目前为止，用户可以添加和删除RowsDataTable。但我不知道如何添加Columns。问题是，每添加一列，每一行都需要一个额外的单元格。如何在我的代码中实现它？

到目前为止，这是我的代码：

import 'package:flutter/material.dart';

class ExerciseTable extends StatefulWidget {
  ExerciseTable({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _ExerciseTableState createState() => _ExerciseTableState();
}

class _ExerciseTableState extends State<ExerciseTable> {
  List<DataRow> _rowList = [
    DataRow(cells: <DataCell>[
      DataCell(Datum(key: GlobalKey())),
      DataCell(ExerciseWidget(key: GlobalKey())),
      DataCell(ExerciseWidget(key: GlobalKey())),
      DataCell(ExerciseWidget(key: GlobalKey())),
      DataCell(ExerciseWidget(key: GlobalKey())),
      DataCell(ExerciseWidget(key: GlobalKey())),
      DataCell(ExerciseWidget(key: GlobalKey())),
      DataCell(Notes(key: GlobalKey())),
    ]),
  ];

  void _addRow() {
    setState(() {
      _rowList.insert(
          0,
          (DataRow(cells: <DataCell>[
            DataCell(Datum(key: GlobalKey())),
            DataCell(ExerciseWidget(key: GlobalKey())),
            DataCell(ExerciseWidget(key: GlobalKey())),
            DataCell(ExerciseWidget(key: GlobalKey())),
            DataCell(ExerciseWidget(key: GlobalKey())),
            DataCell(ExerciseWidget(key: GlobalKey())),
            DataCell(ExerciseWidget(key: GlobalKey())),
            DataCell(Notes(key: GlobalKey())),
          ])));
    });
  }

  void _deleteRow() {
    setState(() {
      _rowList.removeAt(0);
    });
  }

  List<DataColumn> _columnList = [
    DataColumn(label: Text('Datum', style: TextStyle(fontSize: 16))),
    DataColumn(label: ExerciseName(key: GlobalKey())),
    DataColumn(label: ExerciseName(key: GlobalKey())),
    DataColumn(label: ExerciseName(key: GlobalKey())),
    DataColumn(label: ExerciseName(key: GlobalKey())),
    DataColumn(label: ExerciseName(key: GlobalKey())),
    DataColumn(label: ExerciseName(key: GlobalKey())),
    DataColumn(label: TextButton.icon(icon: Icon(Icons.add), label: Text('Add Column'), onPressed: null, key: GlobalKey())),
  ];

  void _addColumn() {
    setState(() {
      _columnList.insert(_columnList.length-1,
        DataColumn(label: ExerciseName(key: GlobalKey())),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text(widget.title),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20.0)),
          ),
          actions: [
            IconButton(
              onPressed: _deleteRow,
              icon: Icon(Icons.delete_outline),
            ),
            IconButton(
              onPressed: _addRow,
              icon: Icon(Icons.add),
            ),
          ]),
      body: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: DataTable(
                    columns: _columnList,
                    rows: _rowList),
              ),
      )
    );
  }
}

标签： flutterdartdatatable

Answer 1

您必须通过 _rowList 创建一个循环

• 使用 List.add(v) 而不是 List.insert(length-1, v)
• 更改数据后最好调用 setState

     void _addColumn() {

      for( DataRow r in _rowList)
           r.cells.add(ExerciseWidget(key: GlobalKey()));

      _columnList.add(DataColumn(label: ExerciseName(key: GlobalKey())));

    setState(() {

    });
  }