Observation en SwiftUI

Gracias a los Macros ahora es mucho más fácil manejar y responder a los estados de nuestros modelos con SwiftUI. Apple introduce en el WWDC23, Observation. Es un conjunto de herramientas que nos permite rastrear cambios en propiedades.

Para manejar los estados y observarlos, contamos con tres herramientas:

  • @Observable
  • @State
  • @Bindable
  • @Environment

@Observable

El macro @Observable rastrea el acceso a las propiedades. Los cambios en las propiedades causan actualizaciones de la interfaz de usuario. Por ejemplo:

import Observation
@Observable class Invoice {
var products: [Product] = []
var paymentType: PaymentType = .cash
}

Esto anteriormente tendría que escribirse así:

class Invoice: ObservableObject {
@Published var products: [Product] = []
@Published var paymentType: PaymentType = .cash
}

Cambios en las propiedades products o paymentType automáticamente provocarán un estado inválido en las vistas, por lo que SwiftUI procederá a actualizarlas.

@Environment

Para acceder a estados globales podemos usar @Environment y acceder a este de la siguiente manera:

@Environment(Account.self) var account

Para que esto sea posible Account debe usar @Observable.

@State

Ahora podemos usar @State para crear variables de estado privadas dentro de nuestras vistas. Como lo hacíamos anteriormente.

struct CounterView: View {
@State private var counter = 0
var body: some View {
HStack {
Text("\(counter)")
Button("Incrementar") {
counter += 1
}
}
}
}
Incrementando un contador usando @State

En este ejemplo cuando presionamos el botón Incrementar aumentar el valor y la vista se actualiza.

@Bindable

@Bindable conecta referencias a la interfaz de usuario. Este crea bindings a tipos observables.

struct ProductView: View {
@Bindable var product: Product
var body: some View {
VStack {
TextField("Product", text: $product.name)
TextField("Notes", text: $product.notes)
}
.padding()
}
}

En este caso gracias a Bindable si cambiamos el valor de las propiedades notes y name, los cambios podrán ser consumidos en la vista padre donde creamos el ProductView.

Aquí podemos ver el código completo donde creamos ProductContainer el cual actuará como vista padre de ProductView y mostrará los datos introducidos actualizandose de manera automática cuando ocurre un cambio dentro de ProductView:

@Observable
class Product {
var name: String = ""
var notes: String = ""
}
struct ProductContainer: View {
var product = Product()
var body: some View {
VStack {
ProductView(product: product)
VStack {
Text(product.name)
Text(product.notes)
}
}
}
}
Mostrando como la interfaz de usuario se actualiza gracias a @Bindable

En resumen

  • El macro @Observable de Swift es una nueva característica para escuchar cambios en propiedades, y desencadenar cambios de la interfaz de usuario asociada a estas propiedades.
  • Usar @State para el estado privado de la vista y para cuando queremos que nuestros modelos puedan ser actualizados desde la vista.
  • @Environment para el estado global, ya no es necesario usar @EnvironmentObject.
  • @Bindable para two-way binding.

Comparte este artículo

Subscríbete a nuestro Newsletter

Mantente al día en el mundo de las aplicaciones móviles con nuestro blog especializado.

Artículos semanales

Todas las semanas artículos nuevos sobre el mundo de las aplicaciones móviles.

No spam

No te enviaremos spam, solo contenido de calidad. Puedes darte de baja cuando quieras.

Contenido de calidad

Nada de contenido generado de manera automática usando ChatGPT.

Recomendaciones

Tips indispensables sobre mejores prácticas y metodologías.

© 2024 AsyncLearn