SLIDER en SWIFTUI en Español

Hoy en SwiftBeta vamos a ver otra vista muy útil en SwiftUI, se llama Slider. Esta vista permite seleccionar un valor entre un rango de valores, para escoger un valor debemos movernos por el Slider.

Slider en código

Vamos a ver otro ejemplo práctico. Crearemos un Slider en SwiftUI. Para ello, ponemos Slider dentro de body y abrimos paréntesis para ver todos los inicializadores que tenemos. En este caso escogemos uno que nos permitirá configurar nuestro Slider con bastantes parámetros:

• value, será el valor que tendrá nuestro Slider, en este caso tenemos que pasar un Binding<BinaryFloatingPoint>
• in, es el rango que vamos a escoger de nuestro Slider, es decir, el valor mínimo que podremos escoger será 0 y el valor máximo será 10
• step, cada paso/posición en nuestro Slider cuánto queremos que incremente nuestro valor
• onEditingChanged, queremos saber cuando se esté editando el valor del Slider
• minimumValueLabel, etiqueta que se pone en el extremo que represente el valor mínimo de nuestro Slider, en nuestro caso es en el extremo izquierdo.
• maximumValueLabel, etiqueta que se pone en el extremo que represente el valor máximo de nuestro Slider, en nuestro caso es en el extremo derecho.
• label, que texto queremos que acompañe a nuestro Slider

En el extremo izquierdo pondremos un texto que ponga min, y en el extremo derecho haremos lo mismo con otro max como texto.

struct ContentView: View {
    
    @State var iPhoneCounter: Float = 0.0
    @State var isEditing: Bool = false
    
    var body: some View {
        Form {
            Slider(value: $iPhoneCounter,
                   in: 0...10,
                   step: 1,
                   onEditingChanged: { editing in
                    isEditing = editing
            },
            minimumValueLabel: Text("min"),
            maximumValueLabel: Text("max")) {
                Text("Hello")
            }
            Text("\(iPhoneCounter)")
                .foregroundColor(isEditing ? .green : .black)
        }
    }
}

En el código anterior, hemos creado un Slider con un rango de 0 a 10 y los pasos son de 1 en 1. Cuando estamos modificando el valor del Slider cambia el color a verde en un Text que hemos añadido, y al soltar el Slider este Text se vuelve a poner en negro.

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