Qué es ColorPicker

El componente ColorPicker permite mostrar al usuario una nueva interfaz de selección de color. No es equivalente a ningún componente de UIKit. Es un nuevo componente añadido en iOS 14.

Aquí podéis consultar la documentación oficial

El componente requiere un String o View, que servirá como su título, y una variable de estado de tipo Color que será la que indicará el color que debe presentar y también guardará el color seleccionado por el usuario.

También permite indicar si el componente debe mostrar los controles de opacidad a través del parámetro supportsOpacity. Tiene varios inicializadores para combinar estos parámetros:

init(selection: Binding, supportsOpacity: Bool, label: () -> Label)
init(LocalizedStringKey, selection: Binding, supportsOpacity: Bool)

Un ejemplo de creación es la siguiente:

@State private var colorSelected: Color = .red

...

ColorPicker("Select a color", selection: $colorSelected)

Nota: el parámetro selection es una variable de estado que usará el componente ColorPicker para asignar el valor seleccionado. Cuando queremos usar un valor fijo (por ejemplo, por motivos de pruebas) podemos usar la función .constant() que pertenece al struct Binding para cumplir con su implementación sin tener que declarar la variable de estado.

Cómo leer datos de un ColorPicker

El ColorPicker maneja tipos de datos Color. Su parámetro selection que encontramos en su ‘inicializador’ define el color actual que debe mostrar el ColorPicker y también se modifica con el color que el usuario selecciona en el componente. Esta variable es una variable de estado que debemos definir previamente, y en ella estará en todo momento el valor actual del ColorPicker.

La declaración de la variable se realiza de la siguiente forma:

@State private var colorSelected: Color = .red

Y para usarla tenemos que pasarla como parámetro al ColorPicker.

ColorPicker("Select a color", selection: $colorSelected)

Modificadores comunes para ColorPicker

El componente DatePicker comparte los mismos métodos de personalización que el componente View y pueden ser consultados en el siguiente enlace.

Los siguientes modificadores son muy comunes de usarlos en este componente.

labelsHidden

Permite ocultar los labels del componente. Es muy útil cuando no queremos mostrar ningún texto, dejándonos posicionar el propio ColorPicker a nuestro gusto:

@State private var colorSelected: Color = .red

...

ColorPicker("Select a color", selection: $colorSelected)
    .labelsHidden()

Ejemplo

Puedes encontrar este ejemplo en github.com bajo el apartado ColorPicker.

Rafael Fernández,
iOS Tech Lider