COLORPICKER en SWIFTUI en Español
ColorPicker en SwiftUI

COLORPICKER en SWIFTUI en Español

ColorPicker en SwiftUI 2.0 es una vista que nos permite escoger un color dentro de nuestra app iOS. Con solo una línea podemos añadir esta funcionalidad en nuestra app para que los users seleccionen colores de distintas maneras: grid, espectro o sliders.

SwiftBeta
Aprende SwiftUI desde cero

ColorPicker es una vista en SwiftUI que nos permite que el user pueda seleccionar un color.

ColorPicker en código

struct ContentView: View {
    
    @State var color: Color = .blue
    
    var body: some View {
        ColorPicker("Color del Rectángulo", selection: $color)
    }
}
Código para añadir ColorPicker en SwiftUI

Para hacerlo vamos a poner dentro del body la vista ColorPicker y vamos abrir paréntesis para ver qué inicializador vamos a usar. En este caso va a ser uno que acepta un title y un selection.

Para el primer parámetro que es un título añadiremos una string y para el segundo argumento ya lo hemos visto en anteriores videos, es de tipo Binding<Color> y por lo tanto vamos a crear una propiedad @State de tipo color. Le pasaremos el valor proyectado en selection para que cada vez que el usuario seleccione un nuevo color, la propiedad color se actualice y en este caso podamos aplicar el color seleccionado a un rectángulo que vamos a crear en el siguiente código:

struct ContentView: View {
    
    @State var color: Color = .blue
    
    var body: some View {
        VStack {
            Rectangle()
                .foregroundColor(color)
                .frame(width: 300, height: 60)
            ColorPicker("Color del Rectángulo", selection: $color)
            Spacer()
        }.padding(60)
    }
}
Código para modificar el color de un Rectangle al seleccionarlo de un ColorPicker

Hemos metido el ColorPicker dentro de un VStack, y dentro del VStack hemos añadido un Spacer para que empuje el contenido del VStack (en este caso el ColorPicker) arriba del todo de la vista.
Y para demostrar que cada vez que cambiamos un color la vista se redibuja, hemos usado un Rectangle para cambiarle el color.
El fondo de Rectangle se actualiza con el color que el user escoja dentro del ColorPicker.

Hoy hemos visto como usar una vista que nos ofrece SwiftUI para que el usuario pueda seleccionar un color dentro de nuestra aplicación, y como siempre de una manera muy sencilla y con muy pocas líneas de código.

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

SwiftUI desde cero