SwiftUI Menu 中 Toggle 的图片为何与 VStack 显示不同？

2026-11-04数据小陈

结论

如果 TestImage 是带颜色的图片资源，可以先为它设置 .renderingMode(.original)。Toggle 使用系统菜单行布局，图标可能会按模板图标的方式显示，所以外观看起来可能和普通 VStack 中的图片不同。

示例中，图片通过 option.image 用在两个 Label 上。可以在 image 属性中指定原始渲染模式：

var image: some View {
    Image("TestImage")
        .renderingMode(.original)
        .frame(width: 24.0, height: 24.0)
        .clipShape(.circle)
        .overlay {
            Circle()
                .strokeBorder(.black)
        }
}

为什么菜单里看起来不同

在 VStack 中，Label 会按普通视图布局图片；在 Menu 中，Toggle 的图标由系统根据菜单项样式和可用空间进行布局。菜单可能会调整图标的渲染方式或显示尺寸，因此即使两处使用同一个 option.image，看起来也可能不同。

.renderingMode(.original) 会让图片保留资源本身的颜色。如果菜单中的图片显示成系统色或单色，可以先尝试这个设置。

尺寸仍不一致时

菜单会控制菜单项图标的布局，因此 .frame(width: 24.0, height: 24.0) 不一定能让图片在菜单里与 VStack 中看起来一样大。如果原图还需要缩放，可以显式使用 resizable() 和 scaledToFit()：

var image: some View {
    Image("TestImage")
        .resizable()
        .scaledToFit()
        .renderingMode(.original)
        .frame(width: 24.0, height: 24.0)
        .clipShape(.circle)
        .overlay {
            Circle()
                .strokeBorder(.black)
        }
}

实际效果会受图片资源和运行平台的菜单样式影响。如果系统菜单仍然限制图标尺寸，图片在菜单中的显示效果可能无法与 VStack 完全一致。