¡Hola! Me gustaría hablarles sobre   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. SwiftUI,  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:   @Estado   @Vinculante   @ObservadoObjeto   @StateObject   @EnvironmentObject  Se convertirán en tus mejores amigos en el desarrollo.   @Estado    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: @State   struct MyButton: View { @State var buttonColor = Color.blue var body: some View { Button("Press me!") { buttonColor = Color.red } .background(buttonColor) } }  @Vinculante    le permite usar un valor que   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: @Binding está almacenado en una parte del código en otra parte del código.   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,   se usa para pasar el valor de   (que está en   ) a   (que está en   ), de modo que cuando el usuario presione el botón, el campo de texto se actualizará y mostrará el nuevo texto. @Binding $text ContentView text SecondView   @ObservadoObjeto    se usa para marcar propiedades que se     Este contenedor de propiedades se suscribe a los cambios en el objeto que se ajusta al   y actualiza automáticamente las partes relevantes de la interfaz si los datos han cambiado. Aquí hay un breve ejemplo del uso de   : @ObservedObject observan y pueden cambiar según los cambios de datos externos. protocolo ObservableObject @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,   Mostramos el valor de userData.name en un campo de texto y lo mostramos en la pantalla. usando @ObservedObject.  Cuando el usuario cambia el valor en el   SwiftUI actualiza automáticamente la parte correspondiente de la interfaz, ya que la propiedad del   se publica y observa mediante   Esto significa que no necesitamos nuestro propio código para actualizar la interfaz y permitimos que SwiftUI lo haga por nosotros. campo de texto, nombre @Published.    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. Nota:   @StateObject    es un contenedor de propiedades que se usa   Esto significa que el objeto se almacena mientras exista la vista y se destruye junto con ella. Por lo general, usar   es más práctico para los objetos de clase que se necesitan para   vistas, no solo para   Por ejemplo: @StateObject para inicializar un objeto de clase y almacenarlo en el estado de vista en SwiftUI. @StateObject varias una.   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,   es un objeto de una clase que contiene varias propiedades que se pueden usar en varias vistas. La clase está marcada como   , por lo que se puede usar con   y   . UserData ObservableObject @StateObject @ObservedObject  En   creamos un nuevo objeto   usando   para guardar el estado entre transiciones entre diferentes vistas. En este caso,   muestra los datos del usuario, los visualiza y contiene un enlace a otra vista   que se puede usar para editar los datos del usuario. ContentView, UserData @StateObject ContentView (ProfileView)  En   , obtenemos acceso al mismo objeto   usando   para modificar los datos del usuario. Cuando el usuario cambia los datos, se actualizan automáticamente en   porque se usa el mismo objeto   . ProfileView UserData @ObservedObject ContentView UserData    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. Nota:   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    es un contenedor de propiedades para   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   raíz que contenga una lista de tareas y la capacidad de crear nuevas tareas. Para esto, creamos una vista   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   separada. @EnvironmentObject pasar objetos de datos a través de la jerarquía de vistas de SwiftUI. ContentView TaskListView AddTaskView  Para pasar el objeto   a las tres vistas, podemos crear su instancia en   y luego pasarlo como parámetro tanto a   como   . Sin embargo, esto puede convertirse en un problema si decidimos agregar aún más vistas anidadas, ya que necesitaremos pasar   a través de muchas vistas intermedias. UserManager ContentView TaskListView a AddTaskView UserManager  En lugar de esto, podemos usar   para pasar   a través de la jerarquía de vistas. De esta manera, todas las vistas que necesitan acceso a   pueden simplemente declararlo como   y usarlo según sea necesario. @EnvironmentObject UserManager UserManager @EnvironmentObject   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   se pasará automáticamente a   y   a través de   . Tenga en cuenta que podemos modificar el estado de   en una vista y los cambios se reflejarán automáticamente en la otra vista.  UserManager TaskListView AddTaskView @EnvironmentObject UserManager  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.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps