SwiftUI Picker 的可点击区域重叠

Question

我目前正在尝试创建一个页面，Picker其中包含三个相邻视图，HStack如下所示：

我制作了一个CustomPicker视图，将框架限制为 90 x 240，然后使用.compositingGroup()和.clipped()使每个选择器的可选区域不重叠。

自定义选择器.swift

import SwiftUI

struct CustomPicker: View {
    @Binding var selection: Int
    let pickerColor: Color
    
    var numbers: some View {
        ForEach(0...100, id: \.self) { num in
            Text("\(num)")
                .bold()
        }
    }
    
    var stroke: some View {
        RoundedRectangle(cornerRadius: 16)
            .stroke(lineWidth: 2)
    }
    
    var backgroundColor: some View {
        pickerColor
            .opacity(0.25)
    }
    
    var body: some View {
        Picker("Numbers", selection: $selection) {
            numbers
        }
        .frame(width: 90, height: 240)
        .compositingGroup()
        .clipped()
        .pickerStyle(.wheel)
        .overlay(stroke)
        .background(backgroundColor)
        .cornerRadius(16)
    }
}

ChoicePage.swift

struct ChoicePage: View {
    @State var choiceA: Int = 0
    @State var choiceB: Int = 0
    @State var choiceC: Int = 0
    
    var body: some View {
        HStack(spacing: 18) {
            CustomPicker(selection: $choiceA, pickerColor: .red)
            CustomPicker(selection: $choiceB, pickerColor: .green)
            CustomPicker(selection: $choiceC, pickerColor: .blue)
        }
    }
}

在预览画布和模拟器中测试两者时CustomPicker，ChoicePage它工作得非常好，但当我尝试在我的物理设备（iPhone 8 和 iPhone 13，均运行 iOS 15.1）上使用它时，可点击区域重叠。我已经尝试过这篇文章和这篇文章以及许多其他文章中的解决方案，但似乎没有什么对我有用。

Answer 1

添加此扩展在 15.4 中对我有用

extension UIPickerView {   
   open override var intrinsicContentSize: CGSize {     
      return CGSize(width: UIView.noIntrinsicMetric, height: super.intrinsicContentSize.height)} 
}

发现于https://developer.apple.com/forums/thread/687986?answerId=706782022#706782022

Answer 2

我有一个适用于 iOS 15+ 的解决方法。

使用 .scaleEffect(x: 0.5) 将内联选择器的可触摸区域减半。

然而，这也会挤压其中的文本，要解决此问题，请仅将 .scaleEffect(x: 2) 应用于 ForEach 内的文本。

  var body: some View {
      Picker(selection: $number, label: Text(""), content: {
            ForEach(0..<21) {value in
            Text("\(value)").tag(number)
                .scaleEffect(x: 3)
            }
        }
    )
    .pickerStyle(InlinePickerStyle())
    .scaleEffect(x: 0.333)
}