Flutter Web中如何修改单个PopupMenuItem的默认悬停颜色？

问题核心在于PopupMenuItem本身自带默认的hover背景样式，仅在child层通过MouseRegion添加背景无法覆盖组件自身的默认样式。以下是两种不影响全局样式的解决方案：

方案1：局部覆盖PopupMenuItem的hover颜色 #

直接给目标PopupMenuItem设置style属性，修改hoverColor为透明或自定义颜色，即可消除默认灰色，同时保留你的自定义悬停效果。

修改后的菜单构建代码：

items: items.map(
  (item) {
    return PopupMenuItem<String>(
      value: item,
      // 覆盖默认hover背景色，不影响全局样式
      style: const PopupMenuItemThemeData(
        hoverColor: Colors.transparent, // 完全去掉默认灰色
        // 也可直接设置自定义悬停色：Colors.blue.withOpacity(0.1)
      ),
      child: SizedBox(
        width: widthItems,
        child: _HoverableMenuItem(
          text: item,
        ),
      ),
    );
  },
).toList(),

方案2：用InkWell替代MouseRegion实现Material风格悬停 #

如果想要更贴合Material设计的交互效果，可以使用InkWell实现悬停，配合局部样式覆盖默认灰色：

首先修改_HoverableMenuItem组件：

class _HoverableMenuItem extends StatefulWidget {
  final String text;
  const _HoverableMenuItem({required this.text});

  @override
  State<_HoverableMenuItem> createState() => _HoverableMenuItemState();
}

class _HoverableMenuItemState extends State<_HoverableMenuItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      // 设置自定义悬停背景色
      hoverColor: Colors.blue.withOpacity(0.1),
      // 必须添加空实现的onTap，否则hover效果不生效
      onTap: () {},
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(vertical: 15),
        child: Text(
          widget.text,
          style: const TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }
}

然后调整PopupMenuItem的配置：

PopupMenuItem<String>(
  value: item,
  padding: EdgeInsets.zero, // 去掉默认内边距，让InkWell占满整个菜单区域
  style: const PopupMenuItemThemeData(
    hoverColor: Colors.transparent, // 屏蔽默认灰色背景
  ),
  child: SizedBox(
    width: widthItems,
    child: _HoverableMenuItem(text: item),
  ),
)

两种方案均为局部样式修改，不会影响应用中其他组件的悬停效果。

内容的提问来源于stack exchange，提问作者Erick Galván