SwiftUI中WheelPickerStyle选择器样式定制问题

一、解决核心问题：自定义选中栏的颜色/透明度 #

SwiftUI原生WheelPickerStyle未直接暴露选中栏的样式修改API，依赖系统默认样式。要在非黑白背景下让选中栏清晰可见，最可靠的方式是封装UIKit的UIWheelPickerView实现完全定制：

自定义可定制的WheelPicker组件 #

import SwiftUI

struct CustomWheelPicker: UIViewRepresentable {
    @Binding var selection: Int
    let values: [String]
    let selectionBarColor: UIColor
    let selectionBarOpacity: CGFloat
    let textColor: UIColor
    let selectedTextColor: UIColor
    
    func makeUIView(context: Context) -> UIPickerView {
        let picker = UIPickerView()
        picker.dataSource = context.coordinator
        picker.delegate = context.coordinator
        picker.selectRow(selection, inComponent: 0, animated: false)
        // 自定义选中栏样式
        picker.subviews.forEach { subview in
            if subview.frame.height <= 2 {
                subview.backgroundColor = selectionBarColor.withAlphaComponent(selectionBarOpacity)
            }
        }
        return picker
    }
    
    func updateUIView(_ uiView: UIPickerView, context: Context) {
        if uiView.selectedRow(inComponent: 0) != selection {
            uiView.selectRow(selection, inComponent: 0, animated: true)
        }
        // 确保系统刷新后选中栏样式不变
        uiView.subviews.forEach { subview in
            if subview.frame.height <= 2 {
                subview.backgroundColor = selectionBarColor.withAlphaComponent(selectionBarOpacity)
            }
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UIPickerViewDataSource, UIPickerViewDelegate {
        let parent: CustomWheelPicker
        
        init(_ parent: CustomWheelPicker) {
            self.parent = parent
        }
        
        func numberOfComponents(in pickerView: UIPickerView) -> Int { 1 }
        
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            parent.values.count
        }
        
        func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
            parent.values[row]
        }
        
        func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
            parent.selection = row
        }
        
        func pickerView(_ pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {
            let color = row == parent.selection ? parent.selectedTextColor : parent.textColor
            return NSAttributedString(string: parent.values[row], attributes: [.foregroundColor: color])
        }
    }
}

替换原生Picker使用自定义组件 #

直接控制每个Picker的宽度和间距，无需负padding：

struct ContentView: View {
    @State private var hours = 0
    @State private var minutes = 0
    @State private var seconds = 0
    
    private let hourValues = (0..<24).map { "\($0)" }
    private let minuteValues = (0..<60).map { "\($0)" }
    private let secondValues = (0..<60).map { "\($0)" }
    
    var body: some View {
        HStack(spacing: 8) {
            CustomWheelPicker(
                selection: $hours,
                values: hourValues,
                selectionBarColor: .white,
                selectionBarOpacity: 0.8,
                textColor: .white,
                selectedTextColor: .black
            )
            .frame(width: 60)
            
            CustomWheelPicker(
                selection: $minutes,
                values: minuteValues,
                selectionBarColor: .white,
                selectionBarOpacity: 0.8,
                textColor: .white,
                selectedTextColor: .black
            )
            .frame(width: 60)
            
            CustomWheelPicker(
                selection: $seconds,
                values: secondValues,
                selectionBarColor: .white,
                selectionBarOpacity: 0.8,
                textColor: .white,
                selectedTextColor: .black
            )
            .frame(width: 60)
        }
        .padding()
        .background(.blue.gradient)
    }
}

二、关于负padding的兼容性问题 #

你当前用负padding+clipped消除间距的方案存在明确兼容性风险：

• 系统版本更新可能改变Picker内部布局，导致硬编码的负padding数值失效
• 开启动态类型（大字体）时，Picker元素尺寸变化，会引发内容裁剪或间距异常

使用上述自定义CustomWheelPicker可彻底规避该问题：通过frame(width:)直接控制宽度，用HStack(spacing:)设置可控间距，完全不需要依赖hack手段。

补充：原生方案临时替代（不推荐） #

若不想封装UIKit组件，可尝试在Picker上层叠加自定义遮罩（视觉hack，对齐精度依赖设备）：

Picker("Hours", selection: $hours) {
    ForEach(0 ..< 24) { hour in
        Text("\(hour)")
    }
}
.pickerStyle(.wheel)
.overlay(
    Rectangle()
        .fill(Color.white.opacity(0.3))
        .frame(height: 2)
        .padding(.horizontal, 20)
)

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