Stepper es un control de SwiftUI que permite a los usuarios incrementar o decrementar un valor numérico al tocar botones o deslizar el dedo sobre la pantalla. Se puede utilizar para ingresar valores como cantidad, edad o cualquier otro valor numérico requerido por la aplicación.
Stepper se compone de dos botones y una etiqueta. La etiqueta muestra el valor actual del stepper y los botones permiten al usuario incrementar o decrementar el valor. De manera predeterminada, Stepper incrementa o decrementa el valor en 1, pero esto se puede personalizar a cualquier valor requerido por la aplicación.
Para implementar un stepper en SwiftUI, primero necesitamos una variable de estado para almacenar el valor actual del stepper. Lo primero que hacemos es declarar la variable de estado de la siguiente forma:
@State private var maxPriceLevel = 5Para crear un stepper, se inicia un componente Stepper.
Stepper(onIncrement: {
self.maxPriceLevel += 1
if self.maxPriceLevel > 5 {
self.maxPriceLevel = 5
}
}, onDecrement: {
self.maxPriceLevel -= 1
if self.maxPriceLevel < 1 {
self.maxPriceLevel = 1
}
}) {
Text("Show \(String(repeating: "$", count: maxPriceLevel)) or below")
}Para el parámetro onIncrement, se especifica la acción que se realizará cuando se haga clic en el botón +. En el código, simplemente aumentamos maxPriceLevel en 1. Por el contrario, el código especificado en el parámetro onDecrement se ejecutará cuando se haga clic en el botón.
Dado que el nivel de precio está en el rango de 1 a 5, realizamos una verificación para asegurarnos de que el valor de maxPriceLevel esté entre 1 y 5. En el cierre, mostramos la descripción de texto de la preferencia de filtro. El nivel de precio máximo se indica con signos de dólar.
En XCode daría el siguiente resultado:
Como en las mayorías de vistas en SwiftUI podemos usar varios inicializadores. En este caso vamos a usar otro inicializador de la siguiente forma:
Primero creamos la variable de estado:
@State private var yourAge = 0y usamos el siguiente inicializador de Stepper:
Stepper("Enter your age", value: $maxPriceLevel, in: 0...100)
Text("Your age is \(yourAge)")De manera que en XCode el resultado es el siguiente:
