@State en SWIFTUI en Español

La vistas en SwiftUI son structs y usamos @State (que es un property wrapper) para poder modificar sus valores. Normalmente no podemos ya que las structs son value types pero usamos este property wrapper para que se encargue de guardar el estado fuera de la struct (fuera de la vista) y podamos dibujar otra vez nuestra vista sin perder el estado que teníamos.

En SwiftUI es muy simple crear una vista. Podemos controlar qué vistas mostrar dentro de la variable body con alguna condición. Podemos añadir condiciones if para mostrar una vista u otra, pero al final, lo que hará que esa vista se redibuje será:

• Un cambio en una propiedad que tenga el property wrapper @State.
• Y sobretodo, que esta propiedad se esté usando dentro de nuestro código.

Es decir, al actualizar un estado que estemos "escuchando" en nuestro código hará que se redibuje una parte de nuestra vista.

Al añadir @State delante de la propiedad lo que estamos haciendo es que si por alguna razón cambia su valor, se regenera la vista por completo, es decir se vuelve a dibujar todo lo que hay dentro de la variable body.

Por ejemplo, para saber si un botón ha sido pulsado, podemos declarar una propiedad de la siguiente manera:

@State private var loginTapped: Bool = false

Normalmente queremos que sea privada ya que no queremos que se acceda desde fuera a esta propiedad.

O también podríais crear una propiedad que sea:

@State private var counter: Int = 0

@State en código

Vamos a ver un ejemplo práctico, el siguiente código muetra:

• Una propiedad @State de tipo Int inicializada a 0. Esta propiedad es nuestro contador.
• Un Text donde mostramos el valor de nuestro contador.
• Un Button que incrementa nuestro contador.

La vista se redibujará cada vez que pulsemos al botón

struct ContentView: View {
    
    @State var counter: Int = 0
    
    var body: some View {
        VStack {
            Text("Counter \(counter)")
            Button("Incrementar Valor") {
                self.counter += 1
            }
        }
    }
}

Vamos a verlo más en detalle. Esta vista se redibuja por los dos puntos que comentábamos más arriba:

• Un cambio en una propiedad que tenga el property wrapper @State. En este caso, estamos modificando counter cada vez que el user pulsa el Button
• Y sobretodo, que esta propiedad se esté usando dentro de nuestro código.
  Usamos nuestra propiedad counter dentro del Text para mostrar su valor.

Hay más property wrappers como @State pero con propósitos diferentes, entre ellos podemos encontrar:

• @Binding
• @ObservedObject
• @StateObject
• @EnvironmentObject

Pero los veremos más adelante.

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