Side by side Picker wheels failing in iOS 15

You used to be able to put two wheel Pickers side-by-side in an HStack, if you used .frame(...) to set the width, along with .clipped().

Example code from previous question here: https://developer.apple.com/forums/thread/127028

HStack(spacing: 0) {
    Picker(selection: $choice1, label: Text("C1")) {
        ForEach(0..<10) { n in
            Text("\(n) a").tag(n)
       }
    }
    .pickerStyle(.wheel)
    .frame(minWidth: 0)
    .clipped()
    // repeat with second Picker
}

This is not working for me now in iOS 15. The views still appear side by side, but the touch area seems to overlap. When you try to adjust the first wheel, it spins the second one. I can move the first wheel, if I touch way over to the leading side of the screen.

(I had to add the explicit Picker style. It seems like defaulting to .menu also started in iOS 15. ?)

Accepted Reply

but the touch area seems to overlap.

Seems to be the same issue as this thread:

Limit width of wheel style picker on iOS

Have you tried using .compositingGroup() as shown in it?

  • Yup, that fixes it. Thanks.

  • Unfortunately this is broken again in iOS15.1

  • Will this get fixed? I am having the same issue

Replies

but the touch area seems to overlap. When you try to adjust the first wheel, it spins the second one. 

Unless I missed something, I tested in your configuration (Xcode 13, iOS 15 in simulator), without problem.

Except it is bad looking to have the 2 so close.

What about adding a small space between the 2 ? Like 10 ?

  • Are you getting wheels or menus? I had to add .pickerStyle(.wheel) because the default seems to have changed. I forgot to add that to my question. I will edit the question now.

Add a Comment

I do not get the problem either (in fact, in your initial post, picker style was there but ill placed).

Here is the code I used:

struct ContentView: View {
    @State private var selectedActivity = 0
    @State private var selectedActivity2 = 2

    var body: some View {
        HStack(spacing: 0) {
            Picker(selection: $selectedActivity, label: Text("C1")) {
                ForEach(0..<10) { n in
                    Text("\(n) a").tag(n)
               }
            }
            .pickerStyle(.wheel)
            .frame(minWidth: 0)
            .clipped()
            // repeat with second Picker
            Picker(selection: $selectedActivity2, label: Text("C1")) {
                ForEach(0..<10) { n in
                    Text("\(n) a").tag(n)
               }
            }
            .pickerStyle(.wheel)
            .frame(minWidth: 0)
            .clipped()
       }
  }
}

So, could you:

  • post your complete exact code
  • post an image of what you get
  • I just pasted your exact code into a new project, and it causes the problem for me. The border between the touch areas is way right of center, not in the center as it should be. I'll add an 'answer' with a screenshot, in a moment. I thought I could edit my question to add a screenshot, but apparently I can't.

Add a Comment

but the touch area seems to overlap.

Seems to be the same issue as this thread:

Limit width of wheel style picker on iOS

Have you tried using .compositingGroup() as shown in it?

  • Yup, that fixes it. Thanks.

  • Unfortunately this is broken again in iOS15.1

  • Will this get fixed? I am having the same issue

Here's a simulator screenshot (iPhone SE). I've marked about where the border is, for the touch events. In my real app, with wider text, it's even further to the right, so that touching the first column of text actually spins the second picker.