Flutter：如何实现双DataTable对应行同步悬停高亮？

要解决左右两个DataTable行同步高亮的问题，核心是共享高亮状态，手动控制行的背景色（默认DataTable的行高亮是内部逻辑，无法跨组件同步）。以下是具体实现步骤：

步骤1：添加状态变量 #

在你的State类中新增变量，记录当前悬停/选中的行索引：

int? _hoveredRowIndex;

步骤2：自定义DataRow的交互与背景色 #

修改左右两个表格的rows生成逻辑，给每个DataRow添加鼠标事件同步状态，并根据索引匹配设置高亮背景：

左侧固定表格行修改 #

rows: leftFixedRows.asMap().entries.map((entry) {
  final index = entry.key;
  final row = entry.value;
  return DataRow(
    color: MaterialStateProperty.resolveWith((states) {
      // 索引匹配时返回高亮色
      if (_hoveredRowIndex == index) {
        return Colors.grey[200]; // 替换为你需要的高亮颜色
      }
      return null; // 默认背景色
    }),
    cells: row.cells,
    // 鼠标悬停同步状态
    onHover: (isHovered) {
      setState(() {
        _hoveredRowIndex = isHovered ? index : null;
      });
    },
    // 可选：点击事件同步高亮
    onSelectChanged: (selected) {
      setState(() {
        _hoveredRowIndex = selected == true ? index : null;
      });
    },
  );
}).toList(),

右侧滚动表格行修改 #

rows: centerFixedRows.asMap().entries.map((entry) {
  final index = entry.key;
  final row = entry.value;
  return DataRow(
    color: MaterialStateProperty.resolveWith((states) {
      if (_hoveredRowIndex == index) {
        return Colors.grey[200]; // 和左侧使用相同高亮色
      }
      return null;
    }),
    cells: row.cells,
    onHover: (isHovered) {
      setState(() {
        _hoveredRowIndex = isHovered ? index : null;
      });
    },
    onSelectChanged: (selected) {
      setState(() {
        _hoveredRowIndex = selected == true ? index : null;
      });
    },
  );
}).toList(),

步骤3：保证行索引对应 #

需确保leftFixedRows和centerFixedRows的行数完全一致，这样索引才能一一对应，同步高亮才能生效。

替代方案：使用第三方库 #

如果不想手动实现，推荐用专门的表格库，这类库已内置固定列和行同步高亮功能：

• data_table_2：支持固定列、横向滚动，原生支持行悬停/选中同步高亮
• flutter_sticky_header：结合Table组件实现粘性表头+固定列，可快速自定义行交互逻辑

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