macOS应用中如何自定义Menu菜单项按钮的图片？

在macOS SwiftUI中，直接给Menu内Button的Image设置resizable、frame、foregroundColor等样式会被Menu的默认菜单项样式覆盖，导致自定义设置不生效。以下是两种可行的解决方式：

方法一：使用Label + 自定义LabelStyle #

通过Label组件替代手动拼接的HStack+Image+Text，再配合自定义LabelStyle来统一控制菜单项的图标和文本样式：

1. 定义自定义LabelStyle #

struct CustomMenuItemLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            // 自定义图标样式
            configuration.icon
                .resizable()
                .frame(width: 24, height: 24)
                .foregroundColor(.blue)
            // 自定义文本样式
            configuration.title
                .font(.system(size: 24))
        }
    }
}

2. 应用到Menu菜单项 #

// 普通Button（样式正常生效）
Button(action: { print("Something") }) {
    HStack {
        Image(systemName: "questionmark.circle")
            .resizable()
            .frame(width: 24, height: 24)
            .foregroundColor(.blue)
        Text("Something")
            .font(.system(size: 24))
    }
}

// 修改后的Menu组件
Menu("☰") {
    Button(action: { print("Something") }) {
        Label("Something", systemImage: "questionmark.circle")
            .labelStyle(CustomMenuItemLabelStyle())
    }
    Button(action: { print("Something Else") }) {
        Label("Something Else", systemImage: "exclamationmark.circle")
            .labelStyle(CustomMenuItemLabelStyle())
    }
}
.menuStyle(.button)
.buttonStyle(.plain)

方法二：利用环境变量统一设置 #

如果需要给所有菜单项统一设置图标样式，可以在Menu内部设置环境变量，比如调整图标缩放：

Menu("☰") {
    Button(action: { print("Something") }) {
        Label("Something", systemImage: "questionmark.circle")
    }
    Button(action: { print("Something Else") }) {
        Label("Something Else", systemImage: "exclamationmark.circle")
    }
}
.menuStyle(.button)
.buttonStyle(.plain)
.environment(\.imageScale, .large) // 统一放大图标

原理说明 #

macOS的Menu组件对菜单项有内置的布局和样式规则，手动嵌套HStack的自定义内容会被Menu的内部样式优先级覆盖。而Label是SwiftUI为图标+文本场景设计的标准组件，配合LabelStyle可以绕过默认样式限制，正确应用自定义设置。

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