I want to implement Horizontal Picker in SwiftUI with native UI and UX. Here is my code, how I've been trying to do it:
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 S: View {
@State private var data = 0
private let items = ["a", "b", "c", "d", "e", "f", "g"]
var body: some View {
Picker(selection: $data, label: Text("Data")) {
ForEach(items, id: \.self) { text in
Text(text)
.foregroundColor(.red)
.scaledToFit()
.rotationEffect(Angle(degrees: 90))
}
}
.introspectUIPickerView { view in
view.subviews[1].backgroundColor = UIColor.clear
}
.labelsHidden()
.frame(height: 30)
.rotationEffect(Angle(degrees: -90))
.pickerStyle(.wheel)
.clipped()
}
}
struct ContentView: View {
var body: some View {
VStack {
S()
S()
S()
S()
S()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
The problem in this code is: When I try to scroll any picker it scrolls the last picker in VStack. This is because the touch area of the picker is too large. So it overlaps all the other pickers. Is it possible to modify the touch areas of the pickers?
I also tried to call
self.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
from this answer SwiftUI - Pickers overlapping , and it didn't help