Create a Segmented Control in SwiftUI
Written by Team Kodeco
A segmented control displays a set of segments, each of which functions as a button. When the user touches a segment, it becomes selected, highlighting its content. Segmented controls are used to provide a selection between two or more options.
To create a segmented control in SwiftUI, we use the Picker
view with the PickerStyle
modifier set to SegmentedPickerStyle()
. Here’s an example of a segmented control with three options:
struct ContentView: View {
@State private var selection = 0
var body: some View {
Picker(selection: $selection, label: Text("Picker")) {
Text("Option 1").tag(0)
Text("Option 2").tag(1)
Text("Option 3").tag(2)
}
.pickerStyle(SegmentedPickerStyle())
}
}
Your preview should look like this:
In this example, you create a Picker
with three Text
views as options. Each option has a tag that identifies it. The selection
property is bound to a state variable that keeps track of the user’s selection.
The pickerStyle
modifier is set to .segmented
to style the picker as a segmented control.
When the user selects an option, the selection
variable is updated with the corresponding tag value.
That’s it! You now know how to create a segmented control in SwiftUI. It’s that easy.