@STATE vs @BINDING en SwiftUI en Español
Property Wrapper State y Binding en SwiftUI

@STATE vs @BINDING en SwiftUI en Español

La diferencia entre State y Binding es quién muta la propiedad. Usa @Binding cuando tengas que mutar una propiedad @State que te llegue de otra vista. Usa @State cuando tengas que mutar una propiedad @State dentro de la misma vista.

SwiftBeta
Aprende SwiftUI desde cero

Durante los últimos posts hemos usado el property wrapper @State para poder mutar el estado de nuestras vistas (si quieres más información puedes acceder al video donde hablo sobre @State).

@State en SwiftUI en Español
State en SwiftUI 2.0 es un property wrapper que usamos para almacenar el valor de una propiedad de una vista. Cuando el valor de esta propiedad cambia, la vista se redibuja con el nuevo valor.

Es decir, hasta ahora la única vista que teníamos (en la que programábamos) era la encargada de mutar la propiedad @State. Vamos a ver un ejemplo:

struct ContentView: View {
    
    @State var counter: Int = 0
    
    var body: some View {
        VStack(spacing: 20) {
            Text("\(counter)")
                .font(.largeTitle)
            Button("Incrementar") {
                counter += 1
            }
        }
    }
}

En este caso, ContentView tiene la propiedad @State de tipo Int.
Y ContentView se encarga de mutar esta propiedad cada vez que se pulsa el botón Incrementar. Hasta aquí todo claro.

PERO no siempre es así, nuestra pantalla se puede componer de múltiples vistas, y la mutación de un estado se puede delegar en otra vista completamente diferente.
Es decir, la vista que tiene un property wrapper @State delega su mutación en alguna otra vista, y cuando pasa esto debemos usar @Binding como veremos a continuación.

Vamos a crear una vista que se llame CounterView y tendrá el contenido del VStack (de ContentView). ContentView pasará a ser como un cascaron donde dentro tendrá otra vista.
¿Entonces qué pasa? Que ContentView ya no será el responsable de actualizar el valor de su propiedad @State, delegará esta responsabilidad a la nueva vista CounterView.
Y para poder mutar la propiedad counter de ContentView fuera de esta vista necesitamos crear una propiedad @Binding de tipo Int en CounterView.

Para que CounterView funcione, necesitamos pasarle el valor proyectado de counter.
struct ContentView: View {
    
    @State var counter: Int = 0
    
    var body: some View {
        CounterView(counter: $counter)
    }
}

struct CounterView: View {
    
    @Binding var counter: Int
    
    var body: some View {
        VStack(spacing: 20) {
            Text("\(counter)")
                .font(.largeTitle)
            Button("Incrementar") {
                counter += 1
            }
        }
    }
}

Todo esto lo hemos ido viendo en los últimos tutoriales, pero como usábamos vistas ya creadas de SwiftUI como el TextField, TextEditor, ColorPicker, etc. No necesitábamos crear la propiedad @Binding. Pero si te fijas, si ahora usamos un TextField o TextEditor vemos que lo que espera es un Binding, porque estamos delegando en estas vistas que se mute alguna propiedad que tenemos en la vista actual.

Para simplificar lo que hemos visto hasta ahora:

  • Usa @Binding cuando tengas que mutar una propiedad @State que te llegue de otra vista.
  • Usa @State cuando tengas que mutar una propiedad @State dentro de la misma vista.

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

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple


SwiftUI desde cero