STEPPER en SWIFTUI en Español
Stepper en SwiftUI

STEPPER en SWIFTUI en Español

Stepper en SwiftUI 2.0 es una vista que nos permite incrementar o decrementar un valor. Podemos modificar el valor en el que queremos incrementar o decrementar simplemente enviando esta información en un parámetro del inicializador.º

SwiftBeta
Aprende SwiftUI desde cero

Stepper en SwiftUI es una vista que nos sirve para incrementar o decrementar un valor.

Stepper en código

Vamos a ver un caso real, imagina que tienes un formulario y quieres seleccionar el número de iPhones que quieres comprar y nos ponen como requerimiento, que el user no pueda poner números inferiores a 0 ni números más grandes que 5.

Puede sonar complicado, pero podemos usar un inicializador de Stepper para que nos haga todo el trabajo.

struct ContentView: View {
    
    @State var iPhoneCounter: Int = 1
    
    var body: some View {
        Form {
            Stepper("iPhone: \(iPhoneCounter)",
                    value: $iPhoneCounter,
                    in: 1...5)
        }
    }
}
Código para que un Stepper en SwiftUI no sea inferior a 0 ni superior a 5

El resultado es el siguiente:

Simulador con Stepper en SwiftUI

Control sobre onIncrement y onDecrement

Como en la mayoría de vistas en SwiftUI podemos usar varios inicializadores. En este caso vamos a usar otro inicializador para que cuando el user pulse el botón de incrementar o decrementar capturemos ese momento para relizar alguna acción. Y vamos a quitar el requerimiento de solo poder seleccionar valores entre 1 y 5.
En este caso haremos un print en consola cada vez que se pulse el botón de incrementar o decrementar.

struct ContentView: View {
    
    @State var iPhoneCounter: Int = 1
    
    var body: some View {
        Form {
            Stepper("iPhone: \(iPhoneCounter)") {
                iPhoneCounter += 1
                print("[Incrementar] Número \(iPhoneCounter)")
            } onDecrement: {
                iPhoneCounter -= 1
                print("[Decrementar] Número \(iPhoneCounter)")
            }
        }
    }
}
Código de un Stepper con control al pulsar incrementar o decrementar

Hoy hemos visto otra vista que podemos usar en nuestras apps iOS.

Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple


SwiftUI desde cero