如何在SwiftUI中使用PickerStyle协议？自定义选择器样式方法

核心结论 #

PickerStyle协议支持自定义，但你看到的带下划线的_makeView、_makeViewList是苹果内部私有API，绝对不能用来实现自定义样式——这么做会导致App审核被拒，且后续iOS版本更新可能直接引发崩溃。

正确自定义PickerStyle的步骤 #

苹果提供了公开的PickerStyle协议接口，只需遵循协议并实现公开的makeBody方法即可：

• 创建结构体遵循PickerStyle协议
• 实现func makeBody(configuration: Configuration) -> some View方法，通过configuration对象获取Picker的选中标签、选项内容等信息，自定义布局样式。

示例：自定义下拉式PickerStyle #

// 自定义下拉选择器样式
struct DropdownPickerStyle: PickerStyle {
    func makeBody(configuration: Configuration) -> some View {
        // 用Menu组件包裹选项内容，实现下拉展开效果
        Menu {
            configuration.content // Picker的所有选项视图
        } label: {
            // 自定义选中状态的展示样式
            HStack {
                configuration.selectedLabel // 当前选中的标签
                Spacer()
                Image(systemName: "chevron.down")
                    .foregroundColor(.gray)
            }
            .padding()
            .background(Color(.systemGray6))
            .cornerRadius(8)
        }
    }
}

// 使用自定义样式的Picker
struct ContentView: View {
    @State private var selectedOption = "Option 1"
    let options = ["Option 1", "Option 2", "Option 3"]
    
    var body: some View {
        Picker("Select Option", selection: $selectedOption) {
            ForEach(options, id: \.self) { option in
                Text(option)
            }
        }
        .pickerStyle(DropdownPickerStyle())
        .padding()
    }
}

更灵活的自定义方案 #

如果需要完全定制选项的交互逻辑（比如自定义弹窗、滚动选择器等），可以直接脱离PickerStyle，用@State变量结合自定义视图实现：

struct CustomPickerView: View {
    @State private var selectedOption = "Option 1"
    @State private var isPickerPresented = false
    let options = ["Option 1", "Option 2", "Option 3"]
    
    var body: some View {
        Button(action: { isPickerPresented.toggle() }) {
            HStack {
                Text(selectedOption)
                Spacer()
                Image(systemName: "chevron.down")
            }
            .padding()
            .background(Color(.systemGray6))
            .cornerRadius(8)
        }
        .sheet(isPresented: $isPickerPresented) {
            List(options, id: \.self) { option in
                Button(action: {
                    selectedOption = option
                    isPickerPresented.toggle()
                }) {
                    Text(option)
                    if option == selectedOption {
                        Image(systemName: "checkmark")
                            .foregroundColor(.blue)
                    }
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Pedro Éli