Today I will show you how to use Stepper.

Stepper has an "+" button, a "-" button, and a value label, perfect for fine-tuning the value in a small range.

Knowledge points:

• First, add a property of type Double and set its initial value to 0.

• This property has a @State property wrapper, which means that the property will be data-bound to the Stepper.

@State var progress: Double = 0

Next:

• Add a Stepper, then set the onIncrement, onDecrement events, and the label.

Stepper {
    // onIncrement
} onDecrement: {
    // onDecrement
} label: {
    // label
}

Next:

• Set the onIncrement event of Stepper. When the user clicks the "+" button, increase the progress value.

• Set the onDecrement event of Stepper. When the user clicks the "-" button, decrease the progress value.

• Set the Stepper label to display the value of the progress property.

• Set the padding of VStack to keep a certain distance between UI elements and the left and right sides of the screen.

VStack {
    Stepper {
        progress += 1
    } onDecrement: {
        progress -= 1
    } label: {
        Text("Progress: \(Int(progress))")
    }
}
.padding()

Source Code:

struct ContentView: View {
    
    @State var progress: Double = 0
    
    var body: some View {
        VStack {
            Stepper {
                progress += 1
            } onDecrement: {
                progress -= 1
            } label: {
                Text("Progress: \(Int(progress))")
            }
        }
        .padding()
    }
}

Follow me on:

(Foks) Hui Wang's LinkedIn