Flutter DataTable如何实现点击按钮仅新增DataRow而不重复生成表头

你现有逻辑的问题是每次点击都会新增一个完整的DataTable实例到组件列表，要实现仅新增行，只需保留单个DataTable，把行数据单独存为状态列表，点击时仅往数据列表新增条目触发刷新即可。

步骤1：调整状态变量 #

先定义行数据结构，替换原有无用的动态表格列表：

// 定义单行数据结构
class WorkoutSet {
  final String weight;
  final String reps;
  WorkoutSet({required this.weight, required this.reps});
}

// State类内的成员变量
// 存储所有行数据，替换原有的sets变量即可
List<WorkoutSet> sets = [];
// 原有List<Widget> _datatableList = [] 可以直接删除

步骤2：调整DataTable构建逻辑 #

修改表格构建方法，固定表格结构，仅根据sets列表动态生成行：

Widget _buildDataTable(){
  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(
          (workoutSet) => DataRow(cells: [
            DataCell(Text(workoutSet.weight)),
            DataCell(Text(workoutSet.reps)),
          ]),
        )
        .toList(),
  );
}

在你的页面build方法中，直接固定放置这个DataTable即可，不要再用_datatableList动态渲染多个表格：

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 其他页面代码
    body: Column(
      children: [
        // 你的输入框、按钮等组件
        // 直接放这一个表格即可
        _buildDataTable(),
      ],
    ),
  );
}

步骤3：修改点击事件逻辑 #

替换原有新增表格的方法，改为新增行数据：

// 替换原有_addDataTableWidget方法
void _addNewDataRow() {
  setState(() {
    // 把当前输入框的内容作为新行加入数据列表
    sets.add(WorkoutSet(
      weight: weightController.text,
      reps: repsController.text,
    ));
    // 可选：新增后清空输入框
    weightController.clear();
    repsController.clear();
  });
}

最后把你的点击事件触发代码改为调用_addNewDataRow()即可。

注意事项 #

• 无需再维护_datatableList相关逻辑，表格仅渲染一次，后续所有操作都通过修改sets列表实现
• 要保证weightController、repsController和页面上的输入框正确绑定，能正常获取输入值
• 后续如果需要实现行编辑、删除功能，直接修改sets列表后调用setState即可刷新表格

内容的提问来源于stack exchange，提问作者who-aditya-nawandar