SwiftUI MenuPickerStyle选中后仅显示Label，如何隐藏Image？

编写了如下SwiftUI代码，Picker的选项中包含Text（标签）和Image，期望选中选项后Picker的标签仅展示Text，但当前会同时显示Image与Text，请问该如何修复？

HStack {
    Picker(selection: $selectedVenueType) {
        ForEach(types, id:\.self) { type in
            HStack {
                Text(type)
                    .font(.footnote)
                    .foregroundStyle(.black)
                Spacer()
                if type != "Select venue type" {
                    Image(getImage(type: type))
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: UIScreen.main.bounds.height*0.04, height: UIScreen.main.bounds.height*0.04)
                }
            }
            .tag(type)
            .frame(width: UIScreen.main.bounds.width*0.78)
        }
    } label: {
        HStack {
            Text("selectedVenueType")
                .font(.footnote)
                .foregroundStyle(.black)
                .labelStyle(.titleOnly)
        }
        .frame(width: UIScreen.main.bounds.width*0.78, height: UIScreen.main.bounds.height*0.05)
    }
    .pickerStyle(MenuPickerStyle())
        .frame(width: UIScreen.main.bounds.width*0.78, height: UIScreen.main.bounds.height*0.05)
        .background(Color.white)
        .tint(Color.black)
        .cornerRadius(14) // Adjust the corner radius as needed
        .shadow(color: Color(red: 0.27, green: 0.27, blue: 0.27, opacity: 0.2), radius: 2, x: 0, y: 1)
}

问题出在MenuPickerStyle默认会复用选项的视图作为选中后的显示内容，同时你的标签视图错误写死了字符串，没有绑定选中值。只需调整标签视图，让它只展示选中的文本，并确保选项视图和标签视图完全独立即可：

修改后的完整代码：

HStack {
    Picker(selection: $selectedVenueType) {
        ForEach(types, id:\.self) { type in
            HStack {
                Text(type)
                    .font(.footnote)
                    .foregroundStyle(.black)
                Spacer()
                if type != "Select venue type" {
                    Image(getImage(type: type))
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: UIScreen.main.bounds.height*0.04, height: UIScreen.main.bounds.height*0.04)
                }
            }
            .tag(type)
            .frame(width: UIScreen.main.bounds.width*0.78)
        }
    } label: {
        // 标签仅显示选中的文本，去掉多余嵌套和无效设置
        Text(selectedVenueType)
            .font(.footnote)
            .foregroundStyle(.black)
            .frame(width: UIScreen.main.bounds.width*0.78, height: UIScreen.main.bounds.height*0.05)
    }
    .pickerStyle(MenuPickerStyle())
    .frame(width: UIScreen.main.bounds.width*0.78, height: UIScreen.main.bounds.height*0.05)
    .background(Color.white)
    .tint(Color.black)
    .cornerRadius(14)
    .shadow(color: Color(red: 0.27, green: 0.27, blue: 0.27, opacity: 0.2), radius: 2, x: 0, y: 1)
}

关键修改点 #

• 修正标签文本绑定：把写死的Text("selectedVenueType")改成Text(selectedVenueType)，直接展示当前选中值。
• 简化标签视图：移除不必要的HStack和无效的.labelStyle(.titleOnly)（该修饰符对Picker自定义标签视图不起作用）。
• 分离选项与标签视图：确保选项里的Image仅出现在下拉菜单中，标签视图仅保留文本，MenuPickerStyle会优先使用自定义label作为选中后的显示内容，不再复用选项视图。

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