如何在SwiftUI（macOS/iOS）中自定义PickerStyle匹配TextField样式

我有一个包含多个TextField的输入表单，想要添加Picker选择组织类型枚举值。当前用默认样式实现的效果是选中项右对齐、颜色偏浅，和表单内TextField的样式不匹配。

当前Picker的UI代码：

LabeledContent("Organisation type") {
    Picker("", selection: $tradingEntity.tradingEntityType) {
        ForEach(OrganisationType.allCases, id: \.self) { value in
            Text(value.friendlyString)
                .tag(value)
        }
    }
    .frame(maxWidth: .infinity)
    .background()
}

需求：

• 选中值左对齐、前景色设为.primary，匹配TextField样式
• 弹出的列表项也左对齐

尝试查看PickerStyle协议时，发现带有下划线的实现方法（如下），但没有相关文档指导如何使用：

static func _makeView<SelectionValue>(value: _GraphValue<_PickerValue<ModifiedPickerStyle, SelectionValue>>, inputs: _ViewInputs) -> _ViewOutputs where SelectionValue : Hashable {
    // code
}

static func _makeViewList<SelectionValue>(value: _GraphValue<_PickerValue<ModifiedPickerStyle, SelectionValue>>, inputs: _ViewListInputs) -> _ViewListOutputs where SelectionValue : Hashable {
    // code
}

请问如何实现这些方法达到所需样式，或者有没有更简便的方案？

解决方案 #

不推荐使用私有API #

你贴出的_makeView、_makeViewList都是SwiftUI的私有API，使用这类API会导致App Store审核不通过，后续系统版本更新也可能直接失效，完全不建议采用。

简便方案：用Menu模拟自定义Picker（iOS 15+） #

这种方式可以完全自定义选中项的样式，完美匹配TextField，同时实现列表项左对齐：

LabeledContent("Organisation type") {
    Menu {
        Picker("", selection: $tradingEntity.tradingEntityType) {
            ForEach(OrganisationType.allCases, id: \.self) { value in
                Text(value.friendlyString)
                    .tag(value)
                    .frame(maxWidth: .infinity, alignment: .leading) // 列表项左对齐
            }
        }
    } label: {
        // 完全自定义选中项的样式
        Text(tradingEntity.tradingEntityType.friendlyString)
            .foregroundColor(.primary)
            .frame(maxWidth: .infinity, alignment: .leading)
    }
}

原理：Menu的label区域可以自由定制，Picker嵌套在Menu内部负责选择逻辑，既保留了Picker的选择功能，又能完全控制显示样式。

备选方案：iOS 16+ 用系统PickerStyle配合自定义样式 #

如果偏好使用系统Picker组件，iOS 16及以上可以用.pickerStyle(.menu)，再通过背景层覆盖实现自定义样式：

LabeledContent("Organisation type") {
    Picker("", selection: $tradingEntity.tradingEntityType) {
        ForEach(OrganisationType.allCases, id: \.self) { value in
            Text(value.friendlyString)
                .tag(value)
                .frame(maxWidth: .infinity, alignment: .leading)
        }
    }
    .pickerStyle(.menu)
    // 隐藏系统默认选中项样式，用自定义文本覆盖
    .opacity(0)
    .overlay(
        Text(tradingEntity.tradingEntityType.friendlyString)
            .foregroundColor(.primary)
            .frame(maxWidth: .infinity, alignment: .leading)
            .allowsHitTesting(false) // 不干扰Picker的点击事件
    )
}

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