Flutter Windows桌面端IconButton Hover时图标自身颜色修改方法

你现在用的hoverColor是修改IconButton的涟漪（溅墨）区域颜色，要改图标本身的hover颜色，有两种常用方法：

这种方式通过监听鼠标的进入/离开事件，手动控制图标颜色，逻辑直观易懂，适合快速实现：

class HoverIconButton extends StatefulWidget {
  const HoverIconButton({super.key});

  @override
  State<HoverIconButton> createState() => _HoverIconButtonState();
}

class _HoverIconButtonState extends State<HoverIconButton> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => setState(() => _isHovered = true),
      onExit: (_) => setState(() => _isHovered = false),
      child: IconButton(
        onPressed: () {},
        icon: Icon(
          Icons.edit,
          color: _isHovered ? Colors.green : null, // hover时变绿色，默认用主题色
        ),
      ),
    );
  }
}

这是Flutter中处理组件多状态（hover、pressed、disabled等）的标准方式，更符合Material设计规范，写法更简洁：

IconButton(
  onPressed: () {},
  // 可选：隐藏涟漪效果，不需要的话可以删除这行
  hoverColor: Colors.transparent,
  icon: const Icon(Icons.edit),
  style: IconButton.styleFrom(
    iconColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.hovered)) {
        return Colors.green; // hover时的图标颜色
      }
      return null; // 默认使用主题色或Icon自身的color
    }),
  ),
)

补充说明：

• 方法二中如果需要保留涟漪效果，只需去掉hoverColor: Colors.transparent，此时涟漪区域会用默认或自定义颜色，图标单独切换为绿色。
• 较新的Flutter版本对MaterialStateProperty的支持更完善，这种写法能统一管理组件的各种状态样式。

内容的提问来源于stack exchange，提问作者B-DK