@State en SWIFTUI en Español
Property Wrapper State en SwiftUI

@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.

SwiftBeta
Aprende SwiftUI desde cero

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
Ejemplo usando @State en SwiftUI en una propiedad tipo Bool
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
Ejemplo usando @State en SwiftUI en una propiedad tipo Int

@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
            }
        }
    }
}
Código de @State en SwiftUI, cada vez que hay un cambio en counter se redibuja la vista

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

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


SwiftUI desde cero