How it works
WheelPickerStyle presents a Picker as a rotating wheel of values, where the centered item is the current selection. It gives you the spinning-drum control familiar from date and time entry, trading the compact footprint of a menu for an always-visible band of nearby choices that the user scrolls through in place. Reach for it when a selection is one of a small, ordered set of options and you want the surrounding values to stay on screen, rather than hiding them behind a tap. As a PickerStyle, it never modifies a view on its own — you hand it to a Picker through the pickerStyle(_:) modifier.
Apply it through .pickerStyle(.wheel)
WheelPickerStyle is a PickerStyle, so you apply it by attaching the .pickerStyle(_:) modifier to a Picker. The .wheel shorthand on the modifier resolves to the shared WheelPickerStyle value; in the example,
.pickerStyle(.wheel)on thePickeris the single line that turns an ordinary picker into the spinning wheel.Drive the wheel from a selection binding
The style only governs presentation — the Picker still owns the data. The
selection:binding decides which value sits centered under the wheel and is updated as the user spins. Here$selection, backed by@State private var selection, both seeds the wheel at "Medium" and receives whatever the user lands on.Supply the rows the wheel scrolls through
Each child view inside the Picker becomes one tick on the wheel, and its
.tag(_:)value is what gets written back to the binding when that row is centered. TheForEach(sizes, id: \.self)loop builds oneText(size)per entry insizes, tagging each with.tag(size)so the wheel's centered item maps to a concrete string.Let the centered item reflect the current value
Because WheelPickerStyle keeps the selected value in the middle of the visible band, the binding and the wheel stay in lockstep. The
Text("Size: \(selection)")label above the picker reads the sameselectionstate, so it always names whichever option the wheel has rolled to the center.
sizes array, such as "Extra Large" and "Tiny", and watch the wheel grow taller with extra ticks above and below the centered selection.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct WheelPickerStyleDemo: View {
@State private var selection = "Medium"
let sizes = ["Small", "Medium", "Large"]
var body: some View {
VStack {
Text("Size: \(selection)")
.font(.headline)
Picker("Size", selection: $selection) {
ForEach(sizes, id: \.self) { size in
Text(size).tag(size)
}
}
.pickerStyle(.wheel)
}
.padding()
}
}