Flutter DataTable headerRowColor 使用 WidgetStateColor 无法正常工作

Question

代码：我构建了一个DataTable小部件，我想通过以下方式更改表的标题颜色：

headingRowColor: WidgetStateColor.resolveWith((states) {
                        if (states.contains(WidgetState.pressed)) {
                          return Colors.red;
                        } else if (states.contains(WidgetState.hovered)) {
                          return Colors.blue;
                        } else {
                          return Colors.white;
                        }
                      }),

问题： 上面代码的问题是颜色总是变成

Colors.white

，如下图所示，我的光标悬停在标题行上方（工具提示显示的是我的光标所在的位置）。

颜色本应为

Colors.white

，但仍为

Colors.blue

。

观察： 我还注意到，如果我将

Colors.white

设置为

Colors.white.withOpacity(0.5)

，当我悬停小部件时，颜色会根据状态正确变化，但它会变得透明，这是我不想要的。

问题： 那么如何更改DataTable的标题颜色？

Answer 1

如果您需要在按下时更改颜色，则需要使用 GestureDetector 或 InkWell，如果您需要悬停，则需要使用 MouseRegion Widget

对于按下，我使用了以下属性

onTapDown

：用主按钮点击已接触屏幕的特定位置。

onTapUp

：使用主按钮触发点击已在特定位置停止接触屏幕。

onTapCancel

：之前触发的 onTapDown 最终不会导致点击。

对于悬停，我使用了以下属性

onEnter

：当鼠标指针进入此小部件时触发。

onExit

：当小部件仍处于安装状态时，当鼠标指针退出此小部件时触发。

完整示例：

class DataTableExample extends StatefulWidget {
  @override
  _DataTableExampleState createState() => _DataTableExampleState();
}

class _DataTableExampleState extends State<DataTableExample> {
  bool isHoverState = false;
  bool isPressedState = false;

  void onHoverState(bool isHovering) {
    setState(() {
      isHoverState = isHovering;
    });
  }

  void onPressState(bool isPressing) {
    setState(() {
      isPressedState = isPressing;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => onPressState(true),
      onTapUp: (_) => onPressState(false),
      onTapCancel: () => onPressState(false),
      child: MouseRegion(
        onEnter: (_) => onHoverState(true),
        onExit: (_) => onHoverState(false),
        child: DataTable(
          headingRowColor: WidgetStateProperty.resolveWith<Color>(
            (Set<WidgetState> states) {
              if (isPressedState) return Colors.red;
              if (isHoverState) return Colors.blue;
              return Colors.transparent; // default color
            },
          ),
          columns: [
            DataColumn(label: Text('Name')),
            DataColumn(label: Text('Age')),
            DataColumn(label: Text('Role')),
          ],
          rows: const <DataRow>[
            DataRow(
              cells: <DataCell>[
                DataCell(Text('Sarah')),
                DataCell(Text('19')),
                DataCell(Text('Student')),
              ],
            ),
            DataRow(
              cells: <DataCell>[
                DataCell(Text('Janine')),
                DataCell(Text('43')),
                DataCell(Text('Professor')),
              ],
            ),
            DataRow(
              cells: <DataCell>[
                DataCell(Text('William')),
                DataCell(Text('27')),
                DataCell(Text('Associate Professor')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

结果屏幕：

正常：

悬停时：

按下时：