iOS15下SwiftUI WheelPicker滚动区域超裁剪框干扰其他组件问题

问题原因 #

iOS 15 对WheelPickerStyle的交互区域计算逻辑做了调整，clipped()修饰符仅能裁剪Picker的视觉呈现，不会限制其底层手势识别的响应范围。你代码里后渲染的分钟Picker手势区域向前覆盖了小时Picker的可视区域，才会出现滑动小时区域却修改分钟数值的异常。同时你原有代码里Picker内部的value变量没有和外部绑定的selection做同步，也会导致最终取值异常。

可行修复方案 #

方案1：新增SwiftUI修饰符（最简单，适配iOS15+） #

直接修改NumberPicker的body部分，在原有修饰符后追加对应限制交互区域的修饰符，同时补充数值同步逻辑即可：

var body: some View {
    Picker(title, selection: $value) {
        ForEach(startValue..<endValue, id: \.self) { currentValue in
            Text("\(currentValue)")
                .tag(currentValue)
        }
    }
    .pickerStyle(WheelPickerStyle())
    .fixedSize(horizontal: true, vertical: true)
    .frame(width: pickerSize.width, height: pickerSize.height)
    .clipped(antialiased: true)
    // 新增以下3行代码
    .contentShape(Rectangle()) // 限制交互区域为当前可视矩形范围
    .compositingGroup() // 将当前视图及其子视图合并为一个渲染层，统一裁剪和交互规则
    .onChange(of: value) { newValue in // 同步内部选中值到外部绑定变量
        selection = newValue
    }
}

方案2：调整修饰符顺序（方案1无效时可尝试） #

部分场景下修饰符的顺序会影响生效逻辑，可以尝试调换fixedSize和frame的顺序，再配合方案1的新增修饰符使用：

Picker(title, selection: $value) {
    // 选项内容保持不变
}
.pickerStyle(WheelPickerStyle())
.frame(width: pickerSize.width, height: pickerSize.height) // 先设置固定尺寸
.fixedSize(horizontal: true, vertical: true) // 后限制自适应规则
.clipped(antialiased: true)
.contentShape(Rectangle())
.compositingGroup()
.onChange(of: value) { newValue in
    selection = newValue
}

方案3：UIKit桥接（兜底方案，兼容性最好） #

如果以上SwiftUI方案都不生效，可以通过UIViewRepresentable桥接原生UIPickerView实现，完全自主控制交互区域，不会出现系统版本适配问题：

struct NativeNumberPicker: UIViewRepresentable {
    let startValue: Int
    let endValue: Int
    let pickerSize: CGSize
    @Binding var selection: Int
    
    func makeUIView(context: Context) -> UIPickerView {
        let picker = UIPickerView()
        picker.delegate = context.coordinator
        picker.dataSource = context.coordinator
        picker.selectRow(selection - startValue, inComponent: 0, animated: false)
        picker.frame = CGRect(origin: .zero, size: pickerSize)
        return picker
    }
    
    func updateUIView(_ uiView: UIPickerView, context: Context) {}
    
    func makeCoordinator() -> Coordinator { Coordinator(self) }
    
    class Coordinator: NSObject, UIPickerViewDelegate, UIPickerViewDataSource {
        let parent: NativeNumberPicker
        init(_ parent: NativeNumberPicker) { self.parent = parent }
        
        func numberOfComponents(in pickerView: UIPickerView) -> Int { 1 }
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            parent.endValue - parent.startValue + 1
        }
        func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
            "\(parent.startValue + row)"
        }
        func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
            parent.selection = parent.startValue + row
        }
    }
}

使用时直接替换原来的NumberPicker即可，不需要额外处理裁剪和交互区域问题。

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