I have 2 Pickers inside of an HStack. One picker contains letters, the second picker contains numbers. Now my problem is when I scroll the picker for the letters a little bit from the right, the picker with the numbers gets scrolled instead. Now I have been looking for an answer, I was able to find 2.
The first answer was adding these 2 modifiers to my pickers. However this doesn't seem to work for me as of iOS15.2.
.compositingGroup()
.clipped()
The second answer was using a UIViewRepresentable of a UIPickerView. Now the thing is I really don't know how UIViewRepresentable works.
Now I was wondering is there a way to fix this without using UIViewRepresentable? This is how my full code looks like.
struct TestingView: View {
@State var selectedNumber = "0"
@State var selectedLetter = "a"
let letters = ["a", "b", "c", "d", "e", "f"]
let numbers = ["1", "2", "3", "4", "5", "6"]
let pickerWidth = UIScreen.main.bounds.width / 2 - 16 - 4
var body: some View {
HStack {
VStack {
Text("Letters")
Picker("Letter", selection: $selectedLetter) {
ForEach(letters, id: \.self) { letter in
Text(letter)
}
}
.pickerStyle(WheelPickerStyle())
.frame(maxWidth: pickerWidth, minHeight: 120, maxHeight: 120, alignment: .center)
.compositingGroup()
.clipped()
}
VStack {
Text("Numbers")
Picker("Number", selection: $selectedNumber) {
ForEach(numbers, id: \.self) { number in
Text(number)
}
}
.pickerStyle(.wheel)
.frame(maxWidth: pickerWidth, minHeight: 120, maxHeight: 120, alignment: .center)
.compositingGroup()
.clipped()
}
}
}
}