Flutter如何修改Popup Menu Item高亮颜色及圆角半径

可以通过以下几种方式修改高亮颜色或其圆角半径，让它和菜单的圆角匹配：

1. 自定义PopupMenuItem的点击区域（最直接） #

用InkWell包裹菜单内容，手动控制高亮的圆角和颜色，同时去掉PopupMenuItem的默认padding避免错位：

PopupMenuItem(
  padding: EdgeInsets.zero, // 移除默认内边距
  child: InkWell(
    borderRadius: BorderRadius.circular(12), // 和菜单圆角保持一致
    splashColor: Colors.blue.withOpacity(0.3), // 自定义点击溅墨颜色
    highlightColor: Colors.blue.withOpacity(0.1), // 自定义长按高亮颜色
    onTap: () {
      // 这里写菜单点击逻辑
    },
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12), // 自定义内边距
      child: Text('菜单选项1'),
    ),
  ),
)

2. 通过Theme全局/局部统一设置 #

如果想让所有PopupMenu都统一样式，可以修改PopupMenuThemeData，同时也能调整高亮相关的颜色：

Theme(
  data: Theme.of(context).copyWith(
    popupMenuTheme: PopupMenuThemeData(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12), // 菜单整体圆角
      ),
      color: Colors.white, // 菜单背景色
    ),
  ),
  child: PopupMenuButton(
    itemBuilder: (context) => [
      PopupMenuItem(
        child: Text('菜单选项1'),
        onTap: () {},
      ),
    ],
  ),
)

3. Material3下用MenuStyle精细控制 #

如果你的项目用了Material3，可以直接通过MenuStyle和MenuItemStyle设置圆角与高亮颜色：

PopupMenuButton(
  style: MenuStyle(
    shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    )),
  ),
  itemBuilder: (context) => [
    PopupMenuItem(
      style: MenuItemStyle(
        shape: MaterialStateProperty.all(RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        )),
        backgroundColor: MaterialStateProperty.resolveWith((states) {
          // 根据状态返回对应颜色
          if (states.contains(MaterialState.pressed)) {
            return Colors.green.withOpacity(0.2);
          }
          return null;
        }),
      ),
      child: Text('菜单选项1'),
    ),
  ],
)

核心思路就是让高亮区域的圆角参数和菜单整体的圆角完全一致，同时可以通过InkWell的颜色属性或者MenuItemStyle的backgroundColor自定义高亮颜色。

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