Observation en SwiftUI

Libranner Santos
22 junio, 20233min de lectura
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 = 0var body: some View {HStack {Text("\(counter)")Button("Incrementar") {counter += 1}}}}

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: Productvar 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
:
@Observableclass 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)}}}}

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.