Flutter MenuBar如何移除背景与边框？

要让MenuBar及内部的MenuItemButton呈现无背景无框的样式，你需要分别给两个组件设置对应的样式属性：

1. 调整MenuBar的基础样式
   通过MenuBar.style属性，直接将背景设为透明并移除边框：

MenuBar(
  style: MenuBarStyle(
    backgroundColor: MaterialStateProperty.all(Colors.transparent),
    border: MaterialStateProperty.all(BorderSide.none),
  ),
  children: [
    // 后续MenuItemButton代码
  ],
)

2. 覆盖MenuItemButton的交互样式
   MenuItemButton默认在 hover、按下等状态下会显示背景色，需要通过style属性统一覆盖所有状态的背景和边框：

MenuItemButton(
  style: MenuItemButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith((states) => Colors.transparent),
    border: MaterialStateProperty.all(BorderSide.none),
    // 可按需设置文字颜色，避免默认颜色与背景冲突
    foregroundColor: MaterialStateProperty.all(Colors.black),
  ),
  child: const Text('Login'),
  onPressed: () {
    // 登录逻辑
  },
)

3. 完整可运行代码示例
   将两者结合后的完整代码如下：

MenuBar(
  style: MenuBarStyle(
    backgroundColor: MaterialStateProperty.all(Colors.transparent),
    border: MaterialStateProperty.all(BorderSide.none),
  ),
  children: [
    MenuItemButton(
      style: MenuItemButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.transparent),
        border: MaterialStateProperty.all(BorderSide.none),
        foregroundColor: MaterialStateProperty.all(Colors.black),
      ),
      child: const Text('Login'),
      onPressed: () {},
    ),
    MenuItemButton(
      style: MenuItemButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.transparent),
        border: MaterialStateProperty.all(BorderSide.none),
        foregroundColor: MaterialStateProperty.all(Colors.black),
      ),
      child: const Text('Register'),
      onPressed: () {},
    ),
  ],
)

设置完成后，MenuBar和按钮就会完全呈现无背景、无边框的效果，仅显示文字，交互时也不会出现默认的背景高亮。

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