Del curso: Domina SwiftUI

Qué es una propiedad @Binding en SwiftUI - Tutorial de SwiftUI

Del curso: Domina SwiftUI

Qué es una propiedad @Binding en SwiftUI

¿Cuándo declarar una propiedad como Binding? Vemos un ejemplo de una vista que necesita que su propiedad sea declarada como Binding. Y vamos a entender por qué. Este wrapper permite crear una conexión bidireccional entre dos vistas, lo que permite que cualquier cambio en el valor de la propiedad se refleje automáticamente en ambas vistas. Nuestro ejemplo es un picker de colores. Tenemos un gradiente y en un texto el número de colores seleccionados. Abajo queremos usar una vista, que es PickerDeColores, para seleccionar los colores que se van a ir viendo en el gradiente. Vamos a ver PickerDeColores. Tenemos un array de colores disponibles y un array de colores seleccionados. Nuestro picker tiene esta pinta. Vamos a ir seleccionando los colores que se van a ir añadiendo a nuestra lista de colores que se van a visualizar después en ContentView. Vemos que nuestros coloresSeleccionados es una variable de estado. Volvemos a ContentView y vamos a usar PickerDeColores. Vamos a pasar el array de colores. Aparentemente todo está bien. Tenemos dos colores seleccionados. Parece que el gradiente va de rojo a amarillo. Y en el PickerDeColores tenemos un 1 en rojo y un 1 en amarillo. Pero si seleccionamos más colores, la vista padre no reacciona, seguimos teniendo dos colores seleccionados y el gradiente sigue igual. Queremos que la parte de ContentView reaccione a los cambios del picker. Para conseguir esto, tenemos que indicar que colores en nuestro picker es un wrapper Binding. Para usar la preview con una propiedad Binding, podemos usar .constant y pasarle un array de ejemplo de colores. Ya hemos quitado este error y ahora vamos a ver qué debemos hacer en ContentView. Para pasarle el array de colores a PickerDeColores, tenemos que hacerlo con el símbolo dólar. Yo, además, voy a añadir un botón para borrar el array gradientColors.removeAll, y ahora, con el array de colores en ContentView siendo un wraper State y, dentro de PickerDeColores, tenemos un Binding para los colores. Vamos a probar nuestro picker en la preview. Esto es exactamente para lo que sirve Binding. Nos permite crear una propiedad en la vista PickerDeColores que dice: «Este valor se proporcionará desde otro lugar y se compartirá entre nosotros y ese otro lugar». Es especialmente útil cuando deseas que un componente hijo actualice el estado de un componente padre en respuesta a acciones realizadas por el usuario en este componente hijo, igual que hemos hecho en nuestro picker.

Contenido