Flutter DataTable - 如何在按钮单击（点击）时添加 DataRow（不重复 HeaderRow）？

Question

我有以下代码可以很好地在按下按钮时创建数据表，除了逻辑创建另一个 table 我只想添加一个数据行。

List<Widget> _datatableList = [];
...
  void _addDataTableWidget() {
setState(() {
  _datatableList.add(_buildEmptyDataTable());
});
}

点击：

_addDataTableWidget();

数据表：

 _buildEmptyDataTable(){
 return
  DataTable(

    columns: const [

      DataColumn(
        label: Text(
          "Weight",
          style: TextStyle(
            fontStyle: FontStyle.italic,
            color: kBlack,
          ),
        ),
        numeric: true,
        
      ),
      DataColumn(
        label: Text(
          "Reps",
          style: TextStyle(
            fontStyle: FontStyle.italic,
            color: kBlack,
          ),
        ),
        numeric: true,
      ),

    ],
    rows: sets
        .map(
          (sets) => DataRow(cells: [              
            DataCell(Text(weightController.text)),
            DataCell(Text(repsController.text)),
          ]),
        )
        .toList(),
  ),
}

如何在单击按钮时仅添加下一个数据行？

Answer 1

您可以通过检查 rows 是否包含数据来处理，而不是在单击时创建 DataTable。并在点击事件上添加行。


  List<DataRow> dataRows = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextField(
            controller: weightController,
          ),
          TextField(
            controller: repsController,
          ),
          if (dataRows.isNotEmpty)
            DataTable(
              columns: const [
                DataColumn(
                  label: Text(
                    "Weight",
                    style: TextStyle(
                      fontStyle: FontStyle.italic,
                      // color: kBlack,
                    ),
                  ),
                  numeric: true,
                ),
                DataColumn(
                  label: Text(
                    "Reps",
                    style: TextStyle(
                      fontStyle: FontStyle.italic,
                      color: Colors.black,
                    ),
                  ),
                  numeric: true,
                ),
              ],
              rows: dataRows,
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            dataRows.add(DataRow(cells: [
              DataCell(Text(weightController.text)),
              DataCell(Text(repsController.text)),
            ]));
          });
        },
      ),
    );
  }
}

Flutter DataTable - 如何在按钮单击（点击）时添加 DataRow（不重复 HeaderRow）？

Flutter DataTable - How to add DataRow (without repeating HeaderRow) on button click(tap)?

datatable

dynamic

dart

flutter