如何在鼠标悬停时修改Flutter DataTable的行背景颜色

问题原因 #

你的代码中DataRow的onSelectChanged回调写法存在语法错误，导致行无法被识别为可交互组件，因此不会触发hovered、pressed等MaterialState状态，背景色切换逻辑自然不会生效。

Dart语法中，(参数) => { 语句 }的写法是返回一个Set集合，而onSelectChanged要求的是无返回值的回调函数，类型不匹配导致交互事件被忽略。

修正方案 #

将所有DataRow的onSelectChanged回调写法调整为以下任意一种即可：

• 箭头函数去掉大括号：

onSelectChanged: (isSelected) => print('Item 1 clicked!'),

• 普通函数写法：

onSelectChanged: (isSelected) {
  print('Item 1 clicked!');
},

修正后完整可用代码 #

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DataTable(
      dataRowColor: MaterialStateProperty.resolveWith(_getDataRowColor),
      columns: const <DataColumn>[
        DataColumn(
          label: Text(
            'Name',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
        DataColumn(
          label: Text(
            'Age',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
        DataColumn(
          label: Text(
            'Role',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
      ],
      rows: <DataRow>[
        DataRow(
          cells: <DataCell>[
            DataCell(Text('Sarah')),
            DataCell(Text('19')),
            DataCell(Text('Student')),
          ],
          // 修正后的回调写法
          onSelectChanged: (isSelected) => print('Item 1 clicked!'),
        ),
        DataRow(
          cells: <DataCell>[
            DataCell(Text('Janine')),
            DataCell(Text('43')),
            DataCell(Text('Professor')),
          ],
          onSelectChanged: (isSelected) => print('Item 2 clicked!'),
        ),
        DataRow(
          cells: <DataCell>[
            DataCell(Text('William')),
            DataCell(Text('27')),
            DataCell(Text('Associate Professor')),
          ],
          onSelectChanged: (isSelected) => print('Item 3 clicked!'),
        ),
      ],
    );
  }

  Color _getDataRowColor(Set<MaterialState> states) {
    const Set<MaterialState> interactiveStates = <MaterialState>{
      MaterialState.pressed,
      MaterialState.hovered,
      MaterialState.focused,
    };

    if (states.any(interactiveStates.contains)) {
      return Colors.blue;
    }
    return Colors.green;
  }
}

如果调整后仍有兼容问题，可以把全局的dataRowColor配置去掉，给每个DataRow单独设置color属性，优先级更高，写法如下：

DataRow(
  color: MaterialStateProperty.resolveWith(_getDataRowColor),
  // 其余配置不变
)

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