0

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()
            }
        }
    }
}
Luis Ramirez
  • 966
  • 1
  • 8
  • 25
  • there are tons of questions around this issue, and it still seems that you can only get it right with UIPickerView. This one should help: https://stackoverflow.com/questions/70328016/clickable-area-of-swiftui-picker-overlapping – ChrisR Feb 05 '22 at 10:31
  • Does this answer your question https://stackoverflow.com/a/65631488/12299030? – Asperi Feb 05 '22 at 15:17
  • @Asperi That answer does not work on a wheel picker style. The user can still change it from outside of the picker on the screen. – Yrb Feb 05 '22 at 21:01

0 Answers0