Flutter Editable组件：如何将保存图标显示在表格左侧

我使用Flutter的Editable组件展示审批列表，默认的保存图标显示在表格最右侧，现在需要把它调整到表格左侧，用于用户点击审批对应交易。当前代码如下：

Editable(
        key: editableKey,
        columns: cols,
        rows: rows,
        zebraStripe: true,
        stripeColor1: Colors.blue,
        stripeColor2: Colors.grey,
        onRowSaved: (value) {
          debugPrint('onRowSaved=$value');
        },
        onSubmitted: (value) {
          debugPrint('onSubmitted=$value');
        },
        borderColor: Colors.blueGrey,
        tdStyle: const TextStyle(fontWeight: FontWeight.bold),
        trHeight: 80,
        thStyle: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        thAlignment: TextAlign.center,
        thVertAlignment: CrossAxisAlignment.end,
        thPaddingBottom: 3,
        showSaveIcon: true,
        saveIconColor: Colors.black,
        saveIcon: Icons.approval_sharp,
        showCreateButton: true,
        tdAlignment: TextAlign.left,
        tdEditableMaxLines: 100, // don't limit and allow data to wrap
        tdPaddingTop: 0,
        tdPaddingBottom: 14,
        tdPaddingLeft: 10,
        tdPaddingRight: 8,
        focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.blue),
            borderRadius: BorderRadius.all(Radius.circular(0))),
      )

*** 补充说明 ***
当前UI中最右侧的图标为保存图标，希望调整到表格左侧。

解决方案 #

方法一：自定义左侧图标列（推荐） #

Editable组件本身没有直接控制保存图标位置的参数，最简单的做法是关闭组件自带的图标，手动在表格最左侧添加一列用于放置审批图标：

1. 将showSaveIcon设为false，关闭默认图标
2. 在columns列表的最前面添加一个自定义列，用于显示图标表头
3. 在rows的每一行数据最前面添加图标组件，绑定审批点击事件

示例修改后的代码片段：

// 自定义列，最左侧添加审批列
final cols = [
  Column(
    child: Text('审批'),
  ),
  // 原有的其他列...
];

// 自定义行，每一行最左侧添加审批图标
final rows = yourDataList.map((item) => [
  GestureDetector(
    onTap: () {
      // 处理审批逻辑
      debugPrint('审批交易：${item.id}');
    },
    child: Icon(Icons.approval_sharp, color: Colors.black),
  ),
  // 原有行数据的其他单元格...
]).toList();

// 使用修改后的cols和rows
Editable(
        key: editableKey,
        columns: cols,
        rows: rows,
        zebraStripe: true,
        stripeColor1: Colors.blue,
        stripeColor2: Colors.grey,
        onRowSaved: (value) {
          debugPrint('onRowSaved=$value');
        },
        onSubmitted: (value) {
          debugPrint('onSubmitted=$value');
        },
        borderColor: Colors.blueGrey,
        tdStyle: const TextStyle(fontWeight: FontWeight.bold),
        trHeight: 80,
        thStyle: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        thAlignment: TextAlign.center,
        thVertAlignment: CrossAxisAlignment.end,
        thPaddingBottom: 3,
        showSaveIcon: false, // 关闭默认图标
        showCreateButton: true,
        tdAlignment: TextAlign.left,
        tdEditableMaxLines: 100,
        tdPaddingTop: 0,
        tdPaddingBottom: 14,
        tdPaddingLeft: 10,
        tdPaddingRight: 8,
        focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.blue),
            borderRadius: BorderRadius.all(Radius.circular(0))),
      )

方法二：修改Editable组件源码 #

如果需要保留组件自带的图标逻辑，可以找到第三方库的源码文件，调整保存图标的渲染位置：

1. 找到构建表格行的方法（通常是buildRow或类似方法）
2. 找到渲染保存图标的代码块，将其从行组件的children末尾移到开头位置

这种方法需要依赖组件源码的结构，后续库更新时需要重新调整，适合需要深度定制的场景。

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