flutter - 如何在悬停在行上时更改 Flutter DataTable 的背景颜色？

Question

我的场景中有一个 DataTable。当用户将鼠标悬停在任何行上时，我想更改行的背景颜色。我在 flutter.dev 上找到了几个样本，但没有一个有效。

例如，看下面的代码（完整代码）。虽然我有绿色作为背景颜色，但当我将鼠标悬停在行上时它不会变成蓝色。

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;
  }
}

Answer 1

我发现问题出在哪里。以下代码修复了我在问题中询问的行问题上的悬停问题。但是，默认情况下为所有行设置透明背景是我的解决方案的代价。

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; // Use the default value.
    return Colors.transparent;
  }

Answer 2

另一件事也伤害了我，我用同样的方法解决了这个问题。 InkWell 没有显示涟漪效应