iOS 16工具栏SwiftUI Menu的glassEffect tint不渲染，如何实现Phone app样式？

我想实现iOS电话应用（Phone app）和照片应用（Photos）中类似的Menu按钮玻璃效果，但使用SwiftUI的标准Menu配合glassEffect时遇到了问题：

1. 当Menu的标签使用Label时，glassEffect完全不渲染，没有任何tint效果，按钮看起来无样式
2. 将标签改为Image后，玻璃效果可以渲染，但呈现为拉伸的长椭圆形态
3. iPad上hover时，我的实现高亮效果在tint外部，而苹果官方版本的高亮与tint本身对齐

当前使用的代码：

Menu {
    // …filter options
} label: {
    Label("Filter", systemImage: "line.3.horizontal.decrease")
}
.glassEffect(.regular.tint(.accentColor).interactive())

1. 修复Label标签下glassEffect不生效的问题 #

Menu默认的按钮样式会干扰glassEffect的渲染，添加.buttonStyle(.plain)可以解除默认样式的覆盖，让玻璃效果正常显示：

Menu {
    // 滤镜选项
} label: {
    Label("Filter", systemImage: "line.3.horizontal.decrease")
}
.glassEffect(.regular.tint(.accentColor).interactive())
.buttonStyle(.plain)

2. 解决Image标签拉伸成椭圆的问题 #

给标签添加固定尺寸约束，配合内边距调整，让玻璃效果的范围与图标对齐，避免拉伸：

Menu {
    // 滤镜选项
} label: {
    Image(systemName: "line.3.horizontal.decrease")
        .frame(width: 36, height: 36) // 匹配官方按钮尺寸
        .padding(4) // 控制玻璃效果的内边距
}
.glassEffect(.regular.tint(.accentColor).interactive())
.buttonStyle(.plain)

3. 实现官方风格的hover高亮对齐 #

通过自定义ButtonStyle，将玻璃效果的触发逻辑与按钮状态绑定，同时严格控制按钮的尺寸和内边距，确保高亮区域与tint范围完全对齐：

struct GlassMenuButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(width: 36, height: 36)
            .padding(4)
            .glassEffect(
                .regular
                    .tint(.accentColor)
                    .interactive(isActive: configuration.isPressed || configuration.isHovered)
            )
    }
}

// 使用自定义样式
Menu {
    Button("全部") {}
    Button("未读") {}
} label: {
    Label("Filter", systemImage: "line.3.horizontal.decrease")
}
.buttonStyle(GlassMenuButtonStyle())

关键原理 #

• Menu的默认按钮样式会自带背景和布局约束，会覆盖或干扰glassEffect的渲染，使用.plain样式可以清除这些默认设置
• 固定按钮的宽高和内边距，能够让玻璃效果的渲染范围与视觉图标区域匹配，避免拉伸或错位
• 自定义ButtonStyle可以精确控制玻璃效果在不同状态（点击、hover）下的触发逻辑，实现与官方一致的交互体验

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