如何制作包含任意视图的SwiftUI Picker？

在Form中使用Picker时，默认的DefaultPickerStyle会自动简化选项内容，只保留文本或图标，导致自定义视图（比如你代码里的颜色块Rectangle）被忽略。要在Picker中显示任意自定义视图，你可以通过指定合适的Picker样式，或者用更灵活的自定义Menu来实现。

方法1：指定.menu样式（iOS 14+） #

这种样式让Picker以下拉菜单形式展示，支持完整渲染自定义视图：

struct PickerWithArbitraryView: View {
    @State private var selectedColor = "Black"
    
    var body: some View {
        Form {
            Picker("Color", selection: $selectedColor) {
                HStack {
                    Rectangle()
                        .foregroundStyle(.black)
                        .frame(width: 10, height: 10)
                    Text("Black")
                }
                .tag("Black")
                
                HStack {
                    Rectangle()
                        .foregroundStyle(.red)
                        .frame(width: 10, height: 10)
                    Text("Red")
                }
                .tag("Red")
            }
            .pickerStyle(.menu) // 关键：启用菜单样式
        }
    }
}

方法2：自定义Menu替代Picker（完全定制化） #

如果需要更自由的样式控制，比如手动添加选中标记，可以用Menu结合Button实现，手动绑定选中状态：

struct CustomColorPicker: View {
    @State private var selectedColor = "Black"
    let colorOptions: [(name: String, color: Color)] = [("Black", .black), ("Red", .red)]
    
    var body: some View {
        Form {
            Menu {
                ForEach(colorOptions, id: \.name) { option in
                    Button(action: { selectedColor = option.name }) {
                        HStack {
                            Rectangle()
                                .foregroundStyle(option.color)
                                .frame(width: 10, height: 10)
                            Text(option.name)
                            if selectedColor == option.name {
                                Spacer()
                                Image(systemName: "checkmark")
                            }
                        }
                    }
                }
            } label: {
                HStack {
                    Text("Color")
                    Spacer()
                    Text(selectedColor)
                        .foregroundStyle(Color(selectedColor.lowercased()))
                    Image(systemName: "chevron.down")
                        .font(.caption)
                }
            }
        }
    }
}

方法3：使用.inline样式（iOS 16+） #

如果希望Picker内联显示在Form中，iOS 16及以上可以用这个样式，同样支持自定义视图：

struct InlineCustomPicker: View {
    @State private var selectedColor = "Black"
    
    var body: some View {
        Form {
            Picker("Color", selection: $selectedColor) {
                HStack {
                    Rectangle()
                        .foregroundStyle(.black)
                        .frame(width: 10, height: 10)
                    Text("Black")
                }
                .tag("Black")
                
                HStack {
                    Rectangle()
                        .foregroundStyle(.red)
                        .frame(width: 10, height: 10)
                    Text("Red")
                }
                .tag("Red")
            }
            .pickerStyle(.inline) // 内联展示样式
        }
    }
}

补充说明 #

官方文档虽标注Picker内容可为任意View，但不同Picker样式的渲染规则不同：

• DefaultPickerStyle在Form中会自动适配系统样式，简化内容展示；
• .menu、.inline等样式支持完整渲染自定义视图；
• 若需要类似SF Symbols应用的底部弹出式选择器，可结合.sheet或.popover手动构建选择器视图。

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