如何在Flutter中创建可编辑表格？无可用包时该如何实现？

一、使用现成Flutter包实现 #

如果不想从零开发，用成熟的包能大幅节省时间，以下是几个实用的选择：

• editable：专为可编辑表格设计，提供开箱即用的可编辑单元格，支持多行编辑、数据导出，API简洁，新手也能快速上手。
• data_table_2：基于原生DataTable扩展，支持点击单元格进入编辑状态，自带排序、筛选功能，适配各类屏幕尺寸，适合数据量较大的场景。
• flutter_tableview：高度可定制，能自定义每个单元格的编辑组件（如下拉框、文本框），可灵活配置表格样式，满足个性化需求。

二、手动实现可编辑表格 #

要是找不到合适的包，用Flutter原生组件组合也能轻松实现，步骤如下：

1. 定义数据源：用二维列表存储表格数据，比如 List<List<String>> tableData = [['单元格1', '单元格2'], ['单元格3', '单元格4']];，每个元素对应一个单元格的内容。
2. 构建表格结构：用Table组件配合TableRow循环渲染行和列，或者用Column嵌套Row实现更灵活的布局。
3. 添加编辑功能：把每个单元格替换成TextField，绑定数据源的索引，输入时实时更新数据：

Table(
  border: TableBorder.all(),
  children: tableData.asMap().entries.map((rowEntry) {
    final rowIdx = rowEntry.key;
    final row = rowEntry.value;
    return TableRow(
      children: row.asMap().entries.map((cellEntry) {
        final cellIdx = cellEntry.key;
        return Padding(
          padding: const EdgeInsets.all(2.0),
          child: TextField(
            controller: TextEditingController(text: cellEntry.value),
            onChanged: (val) {
              setState(() {
                tableData[rowIdx][cellIdx] = val;
              });
            },
            decoration: const InputDecoration(
              border: InputBorder.none,
              contentPadding: EdgeInsets.symmetric(horizontal: 8),
            ),
          ),
        );
      }).toList(),
    );
  }).toList(),
)

4. 增强交互体验：可以添加行/列的增删按钮，比如在每行末尾加一个删除图标，点击后移除对应行；或者在表格顶部添加新增行按钮，点击后向数据源添加新的空行。
5. 样式优化：调整表格边框、单元格间距、字体大小，用MediaQuery适配不同设备，确保显示效果美观。

附上你提供的可编辑表格示例图：

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