< How to create a date picker and read values from it | How to create a stepper and read values from it > |
Updated for Xcode 14.2
Updated for iOS 15
SwiftUI’s Picker
can also be used to create segmented controls equivalent to UISegmentedControl
from UIKit, although it needs to be bound to some state and you must ensure to give each segment a tag so it can be identified. Segments can be text or pictures; anything else will silently fail.
As an example, this creates a segmented control that works with a favoriteColor
state property, and adds a text view below that shows whichever value was selected:
struct ContentView: View {
@State private var favoriteColor = 0
var body: some View {
VStack {
Picker("What is your favorite color?", selection: $favoriteColor) {
Text("Red").tag(0)
Text("Green").tag(1)
Text("Blue").tag(2)
}
.pickerStyle(.segmented)
Text("Value: \(favoriteColor)")
}
}
}
Download this as an Xcode project
Important: If you’re using Xcode 12 you need to use SegmentedPickerStyle()
rather than .segmented
.
In this instance, though, it’s better to create an array to store the various colors, then use ForEach
to create the text view inside using a loop:
struct ContentView: View {
@State private var favoriteColor = "Red"
var colors = ["Red", "Green", "Blue"]
var body: some View {
VStack {
Picker("What is your favorite color?", selection: $favoriteColor) {
ForEach(colors, id: \.self) {
Text($0)
}
}
.pickerStyle(.segmented)
Text("Value: \(favoriteColor)")
}
}
}
Download this as an Xcode project
SPONSORED In-app subscriptions are a pain to implement, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app. Oh, and it's free if your app makes less than $10k/mo.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Link copied to your pasteboard.