Los 5 contenedores de propiedades principales de SwiftUI y cómo usarlos de manera efectiva

¡Hola! Me gustaría hablarles sobre SwiftUI, un marco para crear interfaces de usuario en iOS y macOS. Es muy conveniente de usar porque emplea un enfoque declarativo para la programación. Con SwiftUI, puede describir cómo debería ser y cómo debería verse su interfaz, y el marco se encargará del resto.

Uno de los elementos clave de SwiftUI es el uso de contenedores de propiedades. Estos son elementos funcionales que le permiten proporcionar lógica adicional para las propiedades.

SwiftUI tiene cinco contenedores de propiedades principales:

1. @Estado

2. @Vinculante

3. @ObservadoObjeto

4. @StateObject

5. @EnvironmentObject

   
   

Se convertirán en tus mejores amigos en el desarrollo.

@Estado

@State le permite crear propiedades que se pueden cambiar y, si es necesario, actualizar la interfaz en función de estos cambios. Por ejemplo, si desea crear un botón que cambie de color cuando se presiona, puede crear una variable @State para almacenar el color y agregarlo al botón:

 struct MyButton: View { @State var buttonColor = Color.blue var body: some View { Button("Press me!") { buttonColor = Color.red } .background(buttonColor) } }

@Vinculante

@Binding le permite usar un valor que está almacenado en una parte del código en otra parte del código. Por lo general, se usa en SwiftUI para pasar un valor de una vista a otra, lo que les permite interactuar entre sí. Por ejemplo, imagina que tenemos dos vistas: una con un campo de texto y la otra con un botón. Queremos que el campo de texto se actualice cuando el usuario presione el botón. Para hacer esto, podemos usar @Binding:

 struct ContentView: View { @State private var text = "" var body: some View { VStack { TextField("Enter text", text: $text) Button("Update text") { text = "New text" } SecondView(text: $text) } } } struct SecondView: View { @Binding var text: String var body: some View { Text(text) } }

En este ejemplo, @Binding se usa para pasar el valor de $text (que está en ContentView ) a text (que está en SecondView ), de modo que cuando el usuario presione el botón, el campo de texto se actualizará y mostrará el nuevo texto.

@ObservadoObjeto

@ObservedObject se usa para marcar propiedades que se observan y pueden cambiar según los cambios de datos externos. Este contenedor de propiedades se suscribe a los cambios en el objeto que se ajusta al protocolo ObservableObject y actualiza automáticamente las partes relevantes de la interfaz si los datos han cambiado. Aquí hay un breve ejemplo del uso de @ObservedObject :

 class UserData: ObservableObject { @Published var name = "John" } struct ContentView: View { @ObservedObject var userData = UserData() var body: some View { VStack { Text("Hello, \(userData.name)!") TextField("Enter your name", text: $userData.name) } } }

En este ejemplo, creamos una clase llamada UserData, que contiene un nombre @Published. En la estructura ContentView, creamos una propiedad llamada userData con el tipo UserData, usando @ObservedObject. Mostramos el valor de userData.name en un campo de texto y lo mostramos en la pantalla.

Cuando el usuario cambia el valor en el campo de texto, SwiftUI actualiza automáticamente la parte correspondiente de la interfaz, ya que la propiedad del nombre se publica y observa mediante @Published. Esto significa que no necesitamos nuestro propio código para actualizar la interfaz y permitimos que SwiftUI lo haga por nosotros.

Nota: si no lo sabe, @Published es un contenedor de propiedades del marco Combine que se puede agregar a una propiedad de clase o estructura, que envía automáticamente notificaciones de cualquier cambio en el valor de esa propiedad a cualquier persona que se haya suscrito. . En otras palabras, es un atributo de ayuda para las propiedades que se pueden rastrear en busca de cambios.

@StateObject

@StateObject es un contenedor de propiedades que se usa para inicializar un objeto de clase y almacenarlo en el estado de vista en SwiftUI. Esto significa que el objeto se almacena mientras exista la vista y se destruye junto con ella. Por lo general, usar @StateObject es más práctico para los objetos de clase que se necesitan para varias vistas, no solo para una. Por ejemplo:

 class UserData: ObservableObject { @Published var name = "John" @Published var age = 30 } struct ContentView: View { @StateObject var userData = UserData() var body: some View { NavigationView { VStack { Text("Name: \(userData.name)") Text("Age: \(userData.age)") NavigationLink( destination: ProfileView(userData: userData), label: { Text("Edit Profile") }) } .navigationTitle("Home") } } } struct ProfileView: View { @ObservedObject var userData: UserData var body: some View { Form { TextField("Name", text: $userData.name) Stepper("Age: \(userData.age)", value: $userData.age) } .navigationTitle("Profile") } }

En este ejemplo, UserData es un objeto de una clase que contiene varias propiedades que se pueden usar en varias vistas. La clase está marcada como ObservableObject , por lo que se puede usar con @StateObject y @ObservedObject .

En ContentView, creamos un nuevo objeto UserData usando @StateObject para guardar el estado entre transiciones entre diferentes vistas. En este caso, ContentView muestra los datos del usuario, los visualiza y contiene un enlace a otra vista (ProfileView) que se puede usar para editar los datos del usuario.

En ProfileView , obtenemos acceso al mismo objeto UserData usando @ObservedObject para modificar los datos del usuario. Cuando el usuario cambia los datos, se actualizan automáticamente en ContentView porque se usa el mismo objeto UserData .

Nota: Use @ObservedObject si necesita observar cambios en un objeto de clase desde una vista y @StateObject si necesita guardar el estado de un objeto de clase que afecta la visualización de varias vistas.

Si usa @ObservedObject en lugar de @StateObject para un objeto necesario en varias vistas, cada vista tendrá su propia instancia del objeto, lo que puede generar problemas con la sincronización de datos entre vistas. Por lo tanto, en este caso, es mejor usar @StateObject.

@EnvironmentObject

@EnvironmentObject es un contenedor de propiedades para pasar objetos de datos a través de la jerarquía de vistas de SwiftUI. Permite el acceso al objeto de datos desde cualquier vista en la jerarquía de SwiftUI que pertenezca al contenedor de Entorno (por ejemplo, Escena, Vista, Aplicación, etc.). Por ejemplo, imagina que tenemos una aplicación de gestión de listas de tareas. Podemos tener un ContentView raíz que contenga una lista de tareas y la capacidad de crear nuevas tareas. Para esto, creamos una vista TaskListView separada que muestra la lista de tareas y un botón para agregar nuevas tareas. Después de agregar una nueva tarea, el usuario debe ser redirigido a la pantalla de agregar tarea, por lo que creamos una vista AddTaskView separada.

Para pasar el objeto UserManager a las tres vistas, podemos crear su instancia en ContentView y luego pasarlo como parámetro tanto a TaskListView como a AddTaskView . Sin embargo, esto puede convertirse en un problema si decidimos agregar aún más vistas anidadas, ya que necesitaremos pasar UserManager a través de muchas vistas intermedias.

En lugar de esto, podemos usar @EnvironmentObject para pasar UserManager a través de la jerarquía de vistas. De esta manera, todas las vistas que necesitan acceso a UserManager pueden simplemente declararlo como @EnvironmentObject y usarlo según sea necesario.

 struct TaskManagerApp: App { @StateObject var userManager = UserManager() var body: some Scene { WindowGroup { ContentView() .environmentObject(userManager) } } } struct ContentView: View { var body: some View { NavigationView { TaskListView() } } } struct TaskListView: View { @EnvironmentObject var userManager: UserManager var body: some View { List(userManager.tasks) { task in TaskRow(task: task) } .navigationBarTitle("Tasks") .navigationBarItems(trailing: Button(action: { // Navigate to AddTaskView }) { Image(systemName: "plus") } ) } } struct AddTaskView: View { @EnvironmentObject var userManager: UserManager var body: some View { // Add new task using userManager } }

Entonces, ahora el objeto UserManager se pasará automáticamente a TaskListView y AddTaskView a través de @EnvironmentObject . Tenga en cuenta que podemos modificar el estado de UserManager en una vista y los cambios se reflejarán automáticamente en la otra vista.

El artículo cubrió los contenedores básicos de propiedades de SwiftUI: @State, @Binding, @ObservedObject, @StateObject, @EnvironmentObject.

Estos contenedores de propiedades forman la base para trabajar con el estado de la aplicación en SwiftUI. Use este artículo como una hoja de trucos para tener los contenedores de propiedades básicos al alcance de su mano, necesarios para desarrollar aplicaciones con SwiftUI. Al aplicar este conocimiento, podrá crear interfaces de usuario más complejas con estados que cambian dinámicamente e integrar datos de sus modelos en SwiftUI.