SwiftUI使用.menu样式Picker时如何调整选项内图片大小

问题表现 #

• 给.menu样式的Picker选项添加文本+图片的自定义布局时，菜单收起后的选中状态下图片会异常放大
• 给图片添加.resizable()、.frame()、.clipped()等常规尺寸调整修饰符无效
• 存放在Assets中的SVG、PNG格式素材均会触发该问题
• 点击展开Picker下拉菜单时，选项内的图片显示尺寸完全正常

复现代码 #

struct ContentView: View {
    @State var array = ["one", "two", "three", "four"]
    @State var selection: String = "one"
    var body: some View {
        HStack {
            Picker("Select",selection: $selection) {
                ForEach(array, id: \.self) { item in
                    HStack {
                        Text(item)
                            Image("BTC")
                                .resizable()
                                .clipped()
                    }
                   
                }
            }
            .pickerStyle(.menu)
            .padding(.trailing)
            
        }
        
    }
}

运行效果 #

问题原因 #

.menu样式的Picker底层调用系统原生菜单组件，菜单收起时的选中标签渲染逻辑和下拉选项的渲染逻辑是独立的：系统会自动扫描选中项视图层级中的第一个Image实例，将其识别为菜单的系统级图标，按照系统菜单图标默认尺寸拉伸渲染，这一步会完全忽略开发者给Image添加的自定义尺寸修饰符；而下拉选项会完整渲染开发者自定义的视图层级，因此显示正常。

解决方案 #

核心思路是避免系统自动抓取你自定义的图片作为系统级菜单图标，两种常用实现方式：

方案1：用非Image视图作为图片的容器，阻断系统识别 #

把图片放在其他视图的overlay/background中，让系统扫描顶层视图时无法直接拿到Image实例，就会完整渲染你自定义的布局：

struct ContentView: View {
    @State var array = ["one", "two", "three", "four"]
    @State var selection: String = "one"
    var body: some View {
        HStack {
            Picker("Select", selection: $selection) {
                ForEach(array, id: \.self) { item in
                    HStack {
                        Text(item)
                        // 用透明Color做容器承载图片
                        Color.clear
                            .frame(width: 16, height: 16)
                            .overlay {
                                Image("BTC")
                                    .resizable()
                                    .scaledToFit()
                            }
                    }
                }
            }
            .pickerStyle(.menu)
            .padding(.trailing)
        }
    }
}

该方案兼容性最好，收起、展开状态下图片尺寸完全一致，所有修饰符都会正常生效。

方案2：使用标准Label组件适配系统菜单渲染逻辑 #

如果不需要自定义特殊布局，可以直接用系统Label组件替代自定义HStack，系统会自动按照菜单图标规范渲染，不会出现异常拉伸：

struct ContentView: View {
    @State var array = ["one", "two", "three", "four"]
    @State var selection: String = "one"
    var body: some View {
        HStack {
            Picker("Select", selection: $selection) {
                ForEach(array, id: \.self) { item in
                    Label {
                        Text(item)
                    } icon: {
                        Image("BTC")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 16, height: 16)
                    }
                    .labelStyle(.titleAndIcon)
                }
            }
            .pickerStyle(.menu)
            .padding(.trailing)
        }
    }
}

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