Flutter中DataTable复选框与排序功能无法同时使用问题排查

问题现象 #

在使用Flutter的DataTable组件时，出现复选框与排序功能无法同时正常工作的矛盾：

• 排序功能生效时，复选框点击后无法正确切换选中状态
• 将行生成方法generateRows()移至build方法内后，复选框恢复正常，但排序操作后UI无变化，排序失效

用户提供的原始代码 #

数据模型类 #

class DTOM {
  String name;
  int age;
  bool isSelected;
  DTOM({required this.name, required this.age, required this.isSelected});
}

List<DTOM> data = [
  DTOM(name: 'Rachna', age: 31, isSelected: false),
  DTOM(name: 'Siddhartha', age: 33, isSelected: true),
  DTOM(name: 'Vedika', age: 27, isSelected: false),
  DTOM(name: 'Vedant', age: 31, isSelected: true),
  DTOM(name: 'Kanti', age: 50, isSelected: false),
];

Widget代码 #

import 'package:flutter/material.dart';
import 'package:the_data_table_widget/data_table_object_model.dart';

class AdvancedTable extends StatefulWidget {
  AdvancedTable({super.key});

  @override
  State<AdvancedTable> createState() => _AdvancedTableState();
}

class _AdvancedTableState extends State<AdvancedTable> {
  bool sortAscending = false;
  int sortColumnIndex = 0;
  List<DataRow> rows = [];
  generateRows() {
    return data.map(
      (e) {
        return DataRow(
          key: UniqueKey(),
          onSelectChanged: (value) {
            setState(() {
              e.isSelected = !e.isSelected;
            });
          },
          selected: e.isSelected,
          cells: [
            DataCell(
              Text(e.name),
            ),
            DataCell(
              Text(e.age.toString()),
            ),
          ],
        );
      },
    ).toList();
  }

  @override
  void initState() {
    super.initState();
    rows = generateRows();
  }

  sortTable(columnIndex, ascending) {
    sortColumnIndex = columnIndex;
    setState(() {
      if (ascending) {
        sortAscending = true;
        rows.sort((a, b) {
          return a.cells[columnIndex].child
              .toString()
              .compareTo(b.cells[columnIndex].child.toString());
        });
      } else {
        sortAscending = false;
        rows.sort((a, b) {
          return b.cells[columnIndex].child
              .toString()
              .compareTo(a.cells[columnIndex].child.toString());
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: DataTable(
            sortAscending: sortAscending,
            sortColumnIndex: sortColumnIndex,
            showCheckboxColumn: true,
            columns: [
              DataColumn(
                label: Text('Name'),
                onSort: sortTable,
              ),
              DataColumn(
                label: Text('Age'),
                onSort: sortTable,
              ),
            ],
            rows: rows,
          ),
        ),
        scrollDirection: Axis.horizontal,
      ),
    );
  }
}

问题根源 #

1. 初始写法的核心问题

   • 在initState()中一次性生成rows列表并存储，后续排序直接操作rows而非原始data列表。排序后rows中的行顺序被打乱，但行对应的原始DTOM对象状态没有和UI同步，导致点击复选框修改isSelected时，UI无法正确映射到排序后的行。
   • 使用UniqueKey()会导致每次重建时行的Key变化，初始生成的rows不会随data的isSelected变化重新生成，所以复选框点击后UI无响应。

2. 移到build内的问题

   • 将generateRows()放到build方法后，每次setState()都会重新生成全新的rows列表，此时复选框能正确反映data的状态，但排序操作是对旧的rows列表进行的，新生成的rows会覆盖排序结果，导致排序失效。

修复方案 #

核心思路是始终基于原始data列表进行排序和行生成，确保数据状态和UI完全同步：

修复后的完整代码 #

// 数据模型类
class DTOM {
  String name;
  int age;
  bool isSelected;
  DTOM({required this.name, required this.age, required this.isSelected});
}

List<DTOM> data = [
  DTOM(name: 'Rachna', age: 31, isSelected: false),
  DTOM(name: 'Siddhartha', age: 33, isSelected: true),
  DTOM(name: 'Vedika', age: 27, isSelected: false),
  DTOM(name: 'Vedant', age: 31, isSelected: true),
  DTOM(name: 'Kanti', age: 50, isSelected: false),
];

// Widget代码
import 'package:flutter/material.dart';

class AdvancedTable extends StatefulWidget {
  AdvancedTable({super.key});

  @override
  State<AdvancedTable> createState() => _AdvancedTableState();
}

class _AdvancedTableState extends State<AdvancedTable> {
  bool sortAscending = false;
  int sortColumnIndex = 0;

  // 直接对原始data列表进行排序
  void sortTable(int columnIndex, bool ascending) {
    setState(() {
      sortColumnIndex = columnIndex;
      sortAscending = ascending;

      if (columnIndex == 0) {
        // 按姓名排序
        data.sort((a, b) => ascending ? a.name.compareTo(b.name) : b.name.compareTo(a.name));
      } else if (columnIndex == 1) {
        // 按年龄排序，直接比较数字而非字符串
        data.sort((a, b) => ascending ? a.age.compareTo(b.age) : b.age.compareTo(a.age));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // 在build中实时生成行，确保和最新的data状态同步
    List<DataRow> generateRows() {
      return data.map((e) {
        return DataRow(
          // 使用ObjectKey绑定DTOM对象，保证行的唯一性和状态关联
          key: ObjectKey(e),
          onSelectChanged: (value) {
            setState(() {
              e.isSelected = !e.isSelected;
            });
          },
          selected: e.isSelected,
          cells: [
            DataCell(Text(e.name)),
            DataCell(Text(e.age.toString())),
          ],
        );
      }).toList();
    }

    return SingleChildScrollView(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: DataTable(
            sortAscending: sortAscending,
            sortColumnIndex: sortColumnIndex,
            showCheckboxColumn: true,
            columns: [
              DataColumn(
                label: const Text('Name'),
                onSort: sortTable,
              ),
              DataColumn(
                label: const Text('Age'),
                onSort: sortTable,
              ),
            ],
            rows: generateRows(),
          ),
        ),
      ),
    );
  }
}

关键修复点 #

• 排序逻辑调整：直接对原始data列表排序，而非DataRow列表，确保排序后的数据和UI行一一对应
• 行生成时机：在build方法内实时生成rows，每次setState()都会根据最新的data状态生成行，保证复选框状态实时更新
• Key优化：用ObjectKey(e)替代UniqueKey()，让每个DataRow和对应的DTOM对象绑定，避免不必要的UI重建，同时确保状态关联正确
• 排序比较优化：直接比较DTOM的属性（name字符串/age数字），避免通过Text组件的字符串进行比较，解决数字排序的逻辑错误（比如"10"排在"2"前面的问题）

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