SwiftUI Horizontal Picker触摸区域重叠问题如何修复

滚动错位的核心原因是旋转Wheel样式Picker时，仅修改了SwiftUI层的显示frame，没有同步修改UIKit层UIPickerView的实际响应bounds：

• 系统原生.wheel样式UIPickerView的固有高度固定为216pt，原代码中写的.frame(height:30) + .clipped()仅裁剪了超出30pt的显示内容，UIPickerView实际的触摸响应区域还是完整的216pt高度
• 5个Picker垂直排列在VStack中时，每个Picker的216pt高响应区会互相重叠，响应链中最后被加载（即VStack最末尾）的Picker触摸优先级最高，会拦截所有区域的触摸事件，因此无论滑动哪个位置，都会触发最后一个Picker滚动。

之前尝试调用setContentCompressionResistancePriority不生效是正常现象：这个属性仅作用于Auto Layout约束下的视图尺寸压缩逻辑，UIPickerView的固有高度是内部硬编码实现的，不受该属性影响。

两步即可解决触摸重叠问题，完全保留原生滚轮交互、滚动惯性和触觉反馈体验：

1. 通过Introspect拿到UIPickerView实例时，直接修改它的实际bounds高度为目标显示高度，废弃默认216pt固有尺寸
2. 给旋转后的Picker添加.contentShape(Rectangle())，将SwiftUI层的手势响应区域严格限制在设置的frame范围内，禁止溢出区域响应触摸

修正后的完整代码 #

import SwiftUI
import Introspect

extension View {
    public func introspectUIPickerView(customize: @escaping (UIPickerView) -> ()) -> some View {
        inject(UIKitIntrospectionView(
                selector: { introspectionView in
                    guard let viewHost = Introspect.findViewHost(from: introspectionView) else {
                        return nil
                    }
                    return Introspect.previousSibling(containing: UIPickerView.self, from: viewHost)
                },
                customize: customize
        ))
    }
}

struct HorizontalPicker: View {
    @State private var data = 0
    private let items = ["a", "b", "c", "d", "e", "f", "g"]
    private let pickerHeight: CGFloat = 30
    
    var body: some View {
        Picker(selection: $data, label: Text("Data")) {
            ForEach(Array(items.enumerated()), id: \.element) { index, text in
                Text(text)
                    .foregroundColor(.red)
                    .scaledToFit()
                    .rotationEffect(Angle(degrees: 90))
                    .tag(index)
            }
        }
        .introspectUIPickerView { picker in
            // 清空默认选中行背景
            picker.subviews[1].backgroundColor = UIColor.clear
            // 核心：直接修改UIPickerView实际高度，移除默认216pt固有尺寸
            picker.frame = CGRect(
                x: picker.frame.origin.x,
                y: picker.frame.origin.y,
                width: picker.frame.width,
                height: pickerHeight
            )
        }
        .labelsHidden()
        // 先设置frame再做旋转，避免布局计算错误
        .frame(height: pickerHeight)
        .rotationEffect(Angle(degrees: -90))
        .pickerStyle(.wheel)
        .clipped()
        // 核心：严格限制触摸响应范围为当前可见frame
        .contentShape(Rectangle())
    }
}

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            HorizontalPicker()
            HorizontalPicker()
            HorizontalPicker()
            HorizontalPicker()
            HorizontalPicker()
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

可选优化 #

• 需要调整横向选择器的宽度时，只需在旋转前给Picker设置.frame(width: 目标宽度)即可，旋转后宽度会自动映射为横向滚动区域的高度
• 需要自定义选中条样式时，可在introspect闭包里修改picker.subviews.last?.backgroundColor，调整颜色和透明度即可实现自定义半透明选中效果
• 修饰符顺序不要随意调换：必须先设置frame、再做旋转，否则会出现布局错位

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