Stepper
Published Jan 4, 2023
Contribute to Docs
The Stepper
is used to give the user precise control over increasing or decreasing a value.
Syntax
var body: some View {
Stepper(value: Binding<Stridable>, in: ClosedRange<Int/Double>, step: Int/Double) {
Label here
}
Modifiers here
}
- The first parameter that
Stepper
takes is avalue
. This parameter needs to be bound to a variable that tracks changes. - The second parameter,
in
, specifies the minimum and maximum values accepted by the stepper. - The third parameter,
step
, specifies the amount thatvalue
should be incremented or decremented by inside the stepper’s range. - A stepper view’s shape, color, and text can be edited using modifiers.
Example
In the example below, @State
is used to store the mutable integer value. A Stepper
is used to count the number of people.
@State var numberOfPeople = 4var body: some View {Stepper(value: $numberOfPeople, in: 2...10, step: 1) {Text("People count: \(numberOfPeople)")}.padding()}
This will display the following:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn SwiftUI on Codecademy
- Skill path
Build iOS Apps with SwiftUI
Learn how to build iOS applications with Swift and SwiftUI and publish them to Apples' App Store.Includes 7 CoursesWith CertificateBeginner Friendly13 hours - Free course
Learn Swift
A powerful programming language developed by Apple for iOS, macOS, and more.Beginner Friendly12 hours