swiftui picker how to hide up down arrows (ios16)

Question

Is there a good way to hide the up down arrows in the picker default style. I am using ios 16. It seems that the older version does not have such arrows.

Also, is there a setting to set the picker's background to the same style as the datepicker in the image without manually setting the background and radious?

I have been struggling on this small feature and tried googling for a few hours but no luck. Any idea will be appreciated

Answer 1

The suggested Menu solution works well if you only have a few options. The problem I've experienced with the Menu solution is that if there are very many options the Menu doesn't automatically scroll to the currently selected option the way the Picker does.

The solution I've used is to use ZStack to place an opaque picker on top of a custom view (my "label"). Setting the opacity modifier on the Picker to 0.025 makes it invisible on your device but it will still trigger when you tap it.

This way you get all the native functionality of the Picker (including scrolling to the selected option) and you can make the label look any way you want without having to create your own custom picker.

Here's the code:

ZStack {
   // Custom picker label
   Text("\(value)")
       .font(.title)
       .foregroundColor(.blue)
       .styleDataEntry(colorScheme: colorScheme) // a custom formatter View extension 

   // Invisible picker
   Picker("", selection: $value) {
        ForEach(0 ..< 200) { option in
            Text("\(option)").tag(option)
        }
   }
   .pickerStyle(.menu)
   .opacity(0.025)
}