Flutter如何仅修改悬停图标的颜色？解决多图标误触发问题

你的问题出在所有图标共用了同一个isHover状态变量——只要有一个图标触发hover事件，整个父组件就会重绘，导致所有图标都跟着切换颜色。

不用给每个图标单独定义变量的话，最直接的解决方式是把MouseRegion和Icon封装成一个独立的小组件，让每个组件自己维护内部的hover状态，互不干扰：

封装独立的HoverIcon组件 #

class HoverIcon extends StatefulWidget {
  final IconData iconData;
  final Color hoverColor;
  final Color normalColor;

  const HoverIcon({
    super.key,
    required this.iconData,
    required this.hoverColor,
    required this.normalColor,
  });

  @override
  State<HoverIcon> createState() => _HoverIconState();
}

class _HoverIconState extends State<HoverIcon> {
  bool _isHover = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onHover: (event) => setState(() => _isHover = true),
      onExit: (event) => setState(() => _isHover = false),
      child: Icon(
        widget.iconData,
        color: _isHover ? widget.hoverColor : widget.normalColor,
      ),
    );
  }
}

使用组件 #

在需要展示图标的地方，直接复用这个组件即可：

Row(
  children: [
    HoverIcon(
      iconData: FontAwesomeIcons.instagram,
      hoverColor: Color(0xFF54b981),
      normalColor: Colors.white,
    ),
    SizedBox(width: 16), // 图标间的间距
    HoverIcon(
      iconData: FontAwesomeIcons.facebook,
      hoverColor: Color(0xFF54b981),
      normalColor: Colors.white,
    ),
    SizedBox(width: 16),
    HoverIcon(
      iconData: FontAwesomeIcons.twitter,
      hoverColor: Color(0xFF54b981),
      normalColor: Colors.white,
    ),
  ],
)

这样每个图标都有自己独立的hover状态，悬停时只有当前图标会变色，完全满足你的需求，也不用在父组件里维护多个状态变量。

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