Usando la vista Stepper en SwiftUI

Marcelo Laprea

22 mayo, 20242min de lectura

El Stepper es una vista de control que permite al usuario realizar acciones de incremento o decremento. Se utiliza para permitir al usuario aumentar o disminuir un valor dentro de un rango predefinido. Veamos un ejemplo:

import SwiftUI

struct ContentView: View {
    // 1
    @State var quantity = 0
    
    var body: some View {
        // 2
        Stepper("Quantity: \(quantity)", value: $quantity, in: 0...50)
            .padding(.horizontal)
    }
}

1. Creamos una variable de estado de tipo Int, donde almacenaremos el valor del Stepper.
2. Creamos el Stepper, indicando un título, su valor Binding y el rango en el que estará, en nuestro caso queremos que vaya de 0 a 50.

Con el Stepper, los usuarios pueden ajustar fácilmente valores numéricos dentro de un rango específico. Esta vista es especialmente útil para seleccionar cantidades, ajustes de configuración y otras acciones de ajuste de valores.

Tomando el control del Stepper

Si queremos tener mas control sobre el valor que cambia al usar el Stepper, podemos usar uno de sus completionHandler como el onIncrement y el onDecrement. Veamos como:

Stepper("Quantity: \(quantity)") {
    // 1
    quantity += 2
} onDecrement: {
    // 2
    quantity -= 2
}
.padding(.horizontal)

1. Estamos usando el completionHandler onIncrement, por lo que cada vez que se ejecuta, vamos a sumarle 2 a nuestra variable quantity.
2. Ahora usamos onDecrement, para restarle 2 a nuestra variable quantity.

Además de estos dos completionHandler, también tenemos el onEditingChanged, que se ejecuta cada vez la edición empieza y termina. Por ejemplo, si se deja pulsado, el onEditingChanged se ejecutará al empezar y al terminar el gesto de pulsar el botón. Veamos como funciona:

Stepper("Quantity: \(quantity)", value: $quantity, in: 0...100) { changed in
    // 1
    print(changed)
}

1. Al inciar el gesto, la variable changed será true y al terminar el gesto será false.