如何消除Flutter中showMenu函数菜单项的垂直间距？

你使用showMenu创建弹窗菜单时，虽已通过constraints实现水平适配，但菜单项间仍存在垂直间距。问题出在PopupMenuItem的默认属性和菜单容器的默认样式上，以下是具体解决方案：

问题代码 #

const width = 100.0;
const height = 40.0;
await showMenu(
  items: [
    PopupMenuItem(padding: EdgeInsets.zero, child: Container(width: width, height: height, color: Colors.blue, child: const Text('test 1'))),
    PopupMenuItem(padding: EdgeInsets.zero, child: Container(width: width, height: height, color: Colors.blue, child: const Text('test 2'))),
  ],
  context: context,
  position: const RelativeRect.fromLTRB(0, 0, 0, 0),
  constraints: const BoxConstraints(maxWidth: width, maxHeight: height * 2),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  color: Colors.red,
);

核心原因 #

PopupMenuItem默认有minHeight: 48.0的限制，即使设置padding: EdgeInsets.zero，这个最小高度仍会撑开垂直空间，导致菜单项间出现间距；另外showMenu的菜单容器默认也可能带有内边距。

解决方案 #

1. 移除PopupMenuItem的最小高度

给每个PopupMenuItem添加minHeight: 0.0，消除默认最小高度带来的间距：

const width = 100.0;
const height = 40.0;
await showMenu(
  items: [
    PopupMenuItem(
      padding: EdgeInsets.zero,
      minHeight: 0.0, // 关键：取消默认最小高度
      child: Container(
        width: width,
        height: height,
        color: Colors.blue,
        child: const Text('test 1')
      )
    ),
    PopupMenuItem(
      padding: EdgeInsets.zero,
      minHeight: 0.0,
      child: Container(
        width: width,
        height: height,
        color: Colors.blue,
        child: const Text('test 2')
      )
    ),
  ],
  context: context,
  position: const RelativeRect.fromLTRB(0, 0, 0, 0),
  constraints: const BoxConstraints(maxWidth: width, maxHeight: height * 2),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  color: Colors.red,
);

2. 消除菜单容器内边距（可选）

如果菜单容器本身还有内边距，可通过menuStyle进一步调整：

const width = 100.0;
const height = 40.0;
await showMenu(
  items: [
    PopupMenuItem(
      padding: EdgeInsets.zero,
      minHeight: 0.0,
      child: Container(
        width: width,
        height: height,
        color: Colors.blue,
        child: const Text('test 1')
      )
    ),
    PopupMenuItem(
      padding: EdgeInsets.zero,
      minHeight: 0.0,
      child: Container(
        width: width,
        height: height,
        color: Colors.blue,
        child: const Text('test 2')
      )
    ),
  ],
  context: context,
  position: const RelativeRect.fromLTRB(0, 0, 0, 0),
  constraints: const BoxConstraints(maxWidth: width, maxHeight: height * 2),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  color: Colors.red,
  menuStyle: MenuStyle(
    padding: MaterialStateProperty.all(EdgeInsets.zero), // 移除菜单容器内边距
    minimumSize: MaterialStateProperty.all(Size(width, height * 2)),
  ),
);

修改后，菜单项间的垂直间距会完全消失，蓝色容器将紧密贴合。

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