Flutter中使用DataTable2实现表格行删除功能

核心实现思路 #

要实现动态删除行效果，不能直接在build方法中写死生成行列表，需要将表格数据源存为组件状态，点击删除时移除对应索引的数据后调用setState触发界面刷新，同时补充缺失的第6列（操作列）即可。

具体修改步骤 #

• 在组件状态类中定义可修改的列表数据源，替代原来写死在rows属性里的固定生成逻辑，数据源初始化放在initState中避免刷新时重置
• 在columns数组末尾新增操作列表头，凑齐要求的6列结构
• 每一行的cells数组末尾新增一个单元格，放置删除按钮，按钮点击事件中移除当前索引对应的数据源项
• 移除数据后调用setState触发表格重新渲染

完整可运行代码 #

class DataTable2SimpleDemo extends StatefulWidget {
  const DataTable2SimpleDemo();

  @override
  State<DataTable2SimpleDemo> createState() => _DataTable2SimpleDemoState();
}

class _DataTable2SimpleDemoState extends State<DataTable2SimpleDemo> {
  // 可修改的表格数据源
  late List<Map<String, dynamic>> _tableData;

  @override
  void initState() {
    super.initState();
    // 初始化100条测试数据
    _tableData = List.generate(
      100,
      (index) => {
        'colA': 'A' * (10 - index % 10),
        'colB': 'B' * (10 - (index + 5) % 10),
        'colC': 'C' * (15 - (index + 5) % 10),
        'colD': 'D' * (15 - (index + 10) % 10),
        'colNum': ((index + 0.1) * 25.4).toString()
      },
    );
  }

  // 删除指定行逻辑
  void _deleteRow(int index) {
    setState(() {
      _tableData.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Container(
          child: DataTable2(
              columnSpacing: 12,
              horizontalMargin: 12,
              minWidth: 600,
              columns: [
                DataColumn2(
                  label: Text('Column A'),
                  size: ColumnSize.L,
                ),
                DataColumn(
                  label: Text('Column B'),
                ),
                DataColumn(
                  label: Text('Column C'),
                ),
                DataColumn(
                  label: Text('Column D'),
                ),
                DataColumn(
                  label: Text('Column NUMBERS'),
                  numeric: true,
                ),
                // 第6列：操作列表头
                DataColumn(
                  label: Text('操作'),
                ),
              ],
              rows: List<DataRow>.generate(
                  _tableData.length,
                  (index) => DataRow(cells: [
                        DataCell(Text(_tableData[index]['colA'])),
                        DataCell(Text(_tableData[index]['colB'])),
                        DataCell(Text(_tableData[index]['colC'])),
                        DataCell(Text(_tableData[index]['colD'])),
                        DataCell(Text(_tableData[index]['colNum'])),
                        // 第6列单元格：删除按钮
                        DataCell(
                          IconButton(
                            icon: Icon(Icons.delete, color: Colors.red, size: 20),
                            onPressed: () => _deleteRow(index),
                          ),
                        ),
                      ]))),
        ),
      ),
    );
  }
}

注意事项 #

• 列数和每行的单元格数必须严格对应，否则会抛出布局异常，新增操作列后要保证每一行都有对应的6个DataCell
• 如果需要删除二次确认，可以在_deleteRow方法中先弹出确认弹窗，用户确认后再执行数据移除逻辑
• 如果需要支持批量删除，只需要给数据源加选中状态字段，批量遍历移除选中项后刷新即可

内容的提问来源于stack exchange，提问作者JuniorDev