如何在Flutter应用中实现可排序DataTable？使用Editable包遇阻

Editable包的DataTable组件默认没有内置排序功能，你需要手动实现状态管理和排序逻辑，具体步骤如下：

1. 维护排序状态 #

在组件中定义状态变量，记录当前排序列名和排序方向：

String? _sortColumn;
bool _isAscending = true;

2. 编写排序函数 #

根据当前排序列和方向，对数据源进行排序。假设你的数据模型是User，包含name、age、email三个字段：

void _sortData(String column) {
  if (_sortColumn == column) {
    // 同一列点击，切换排序方向
    _isAscending = !_isAscending;
  } else {
    // 新列点击，默认升序
    _sortColumn = column;
    _isAscending = true;
  }

  // 根据列和方向排序数据
  setState(() {
    if (column == 'name') {
      _users.sort((a, b) => _isAscending ? a.name.compareTo(b.name) : b.name.compareTo(a.name));
    } else if (column == 'age') {
      _users.sort((a, b) => _isAscending ? a.age.compareTo(b.age) : b.age.compareTo(a.age));
    } else if (column == 'email') {
      _users.sort((a, b) => _isAscending ? a.email.compareTo(b.email) : b.email.compareTo(a.email));
    }
  });
}

3. 绑定表头点击事件 #

在Editable的DataTable的columns配置中，给每个表头添加onTap事件触发排序，同时显示排序状态图标：

Editable(
  columns: [
    Column(
      title: GestureDetector(
        onTap: () => _sortData('name'),
        child: Row(
          children: [
            const Text('姓名'),
            if (_sortColumn == 'name')
              Icon(_isAscending ? Icons.arrow_upward : Icons.arrow_downward),
          ],
        ),
      ),
    ),
    Column(
      title: GestureDetector(
        onTap: () => _sortData('age'),
        child: Row(
          children: [
            const Text('年龄'),
            if (_sortColumn == 'age')
              Icon(_isAscending ? Icons.arrow_upward : Icons.arrow_downward),
          ],
        ),
      ),
    ),
    Column(
      title: GestureDetector(
        onTap: () => _sortData('email'),
        child: Row(
          children: [
            const Text('邮箱'),
            if (_sortColumn == 'email')
              Icon(_isAscending ? Icons.arrow_upward : Icons.arrow_downward),
          ],
        ),
      ),
    ),
  ],
  rows: _users.map((user) => Row(
    cells: [
      Cell(text: user.name),
      Cell(text: user.age.toString()),
      Cell(text: user.email),
    ],
  )).toList(),
)

额外提示 #

• 如果数据来自网络请求，建议保留原始数据副本，每次排序都基于副本操作，避免多次排序导致数据错乱。
• 处理日期等复杂类型时，需要先将字符串转为对应类型（如DateTime）再执行比较逻辑。

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