La Guía final de Swiftui para los nuevos desarrolladores de Ios

• – establece el estilo de la fuente
• – cambia el color del texto
• – añade padding por defecto en la vista
• – llena el fondo con un color
• – redondea los rincones de una forma o imagen
• – añade una sombra de gota

Los modificadores pueden ser aplicados en cualquier orden, pero el pedido importa porque cada modificador envuelve la vista anterior. Por ejemplo, remata el contenido primero y luego pinta el fondo, dando como resultado un rectángulo rojo alrededor del área acolchada. Retrocede el orden y obtiene un fondo rojo con texto dentro, sin relleno adicional.

Contenedores de diseño – VStack, HStack, ZStack

SwiftUI utiliza tres contenedores de pila primaria para organizar vistas:

• VStack – organiza los niños verticalmente (de arriba a abajo)
• HStack – organiza los niños horizontalmente (izquierda a derecha)
• ZStack – superpone a los niños encima de los demás (orden profundo)

Puede anidar pilas arbitrariamente para crear diseños complejos. Cada pila también soporta y parámetros. Por ejemplo:

VStack(alignment: .leading, spacing: 20) {
 Text("Top")
 HStack {
 Text("Left")
 Text("Right")
 }
 ZStack {
 Color.blue
 Text("Overlay")
 .foregroundColor(.white)
 }
 .frame(height: 100)
}

Esto produce una pila vertical con alineación de vanguardia, que contiene un título, un par horizontal, y un rectángulo azul con texto blanco centrado en la parte superior.

State Management in SwiftUI

Una de las características más poderosas de SwiftUI es cómo maneja datos dinámicos. En lugar de actualizar manualmente la interfaz de usuario cuando los datos cambian, declara que los datos como estado, y SwiftUI automáticamente re-renders las vistas afectadas. Esto elimina toda una clase de errores relacionados con la sincronización de la interfaz de usuario.

SwiftUI proporciona varios envoltorios de propiedad para gestionar el estado, cada uno adecuado a diferentes escenarios:

Uso de @State para el Estado Local

se utiliza para valores simples que pertenecen exclusivamente a una sola vista, como el estado de la rebote o la entrada de un campo de texto. Cuando el valor cambia, la vista se re-invoca. Ejemplo:

struct ToggleExample: View {
 @State private var isOn = false

 var body: some View {
 Toggle("Enable Notifications", isOn: $isOn)
 .padding()
 }
}

Observe el prefijo — crea una que une al Estado, permitiendo que lea y escriba el valor. Siempre marque con para hacer cumplir que es interno a la vista.

@Binding for Passing State Down

Cuando una vista de niño necesita modificar el estado de propiedad de un padre, usted utiliza . El niño recibe una unión al valor y puede cambiarlo, y la vista del padre actualiza automáticamente. Por ejemplo:

struct ParentView: View {
 @State private var showSheet = false

 var body: some View {
 ChildView(showSheet: $showSheet)
 }
}

struct ChildView: View {
 @Binding var showSheet: Bool

 var body: some View {
 Button("Toggle Sheet") {
 showSheet.toggle()
 }
 }
}

Los enlaces son el pegamento que conecta las opiniones en una jerarquía sin introducir patrones complejos de delegación o callback.

Objetos observables y @Objeto Estatal

Para modelos de datos más complejos compartidos a través de múltiples vistas, crear una clase conforme a . Dentro de la clase, marcar propiedades con para que los cambios activen actualizaciones de la vista. Luego utilizar en la vista que posee el objeto. Ejemplo:

class UserSettings: ObservableObject {
 @Published var username = "Guest"
}

struct SettingsView: View {
 @StateObject private var settings = UserSettings()

 var body: some View {
 VStack {
 Text("Hello, \(settings.username)")
 TextField("Username", text: $settings.username)
 .textFieldStyle(RoundedBorderTextFieldStyle())
 .padding()
 }
 }
}

Use sólo cuando se inicialice el objeto en esa opinión. Si el objeto se crea en otro lugar, utilice para observarlo sin tomar la propiedad.

@EnvironmentObjeto para el Estado compartido

Cuando usted necesita inyectar el mismo objeto observable en muchas vistas sin pasarlo a través de cada inicializador, use . Primero, cree el objeto en una vista padre (por ejemplo, el punto de entrada de la aplicación) e inyecte el modificador . Cualquier vista descendente puede entonces acceder al mismo declarando una propiedad con . Esto es especialmente útil para la configuración de datos auténticos.

@main
struct MyApp: App {
 @StateObject private var settings = UserSettings()

 var body: some Scene {
 WindowGroup {
 ContentView()
 .environmentObject(settings)
 }
 }
}

struct DetailView: View {
 @EnvironmentObject var settings: UserSettings

 var body: some View {
 Text(settings.username)
 }
}

Para una mayor inmersión en la gestión estatal, la La documentación de aplicación sobre la gestión del estado de la UI es un recurso excelente.

Construyendo tu primera aplicación de SwiftUI – Una aplicación de notas

Aplicar lo que has aprendido mediante la construcción de una sencilla aplicación de toma de notas. La aplicación mostrará una lista de notas, permite al usuario añadir nuevas, y mostrar detalles cuando se toca una nota.

Configuración del modelo de datos

Crear un nuevo archivo Swift llamado y definir un modelo:

import Foundation

struct Note: Identifiable {
 let id = UUID()
 var title: String
 var content: String
}

El protocolo requiere una propiedad , que SwiftUI utiliza para distinguir los elementos en una lista.

Crear la vista de la lista

En , utilice para mantener una serie de notas y un para mostrarlas. Agregue un botón de barra de herramientas para crear nuevas notas:

struct ContentView: View {
 @State private var notes = [
 Note(title: "Hello", content: "This is my first note.")
 ]

 var body: some View {
 NavigationStack {
 List {
 ForEach(notes) { note in
 NavigationLink(destination: NoteDetailView(note: note)) {
 Text(note.title)
 }
 }
 .onDelete(perform: removeNote)
 }
 .navigationTitle("Notes")
 .toolbar {
 ToolbarItem(placement: .navigationBarTrailing) {
 Button(action: addNote) {
 Image(systemName: "plus")
 }
 }
 }
 }
 }

 private func addNote() {
 notes.append(Note(title: "New Note", content: ""))
 }

 private func removeNote(at offsets: IndexSet) {
 notes.remove(atOffsets: offsets)
 }
}

Observe el uso de (iOS 16+) para la navegación y para empujar una vista detallada. El modificador permite el deslizamiento a la deriva.

Añadiendo navegación y detalla Ver

Crear un nuevo archivo que tome un y permita la edición. Para brevedad, mostraremos el título y el contenido en modo sólo lectura. Luego podrá ampliarlo con vinculantes para habilitar la edición.

struct NoteDetailView: View {
 let note: Note

 var body: some View {
 VStack(alignment: .leading, spacing: 16) {
 Text(note.title)
 .font(.title)
 Text(note.content)
 .font(.body)
 .foregroundColor(.secondary)
 Spacer()
 }
 .padding()
 .navigationTitle("Note")
 }
}

Ejecute la aplicación en el simulador o la vista previa. Verá una lista de notas, puede añadir nuevas, pulsar para ver detalles y cambiar para eliminar. Esta aplicación básica muestra Lista, NavegaciónEstante, estado y flujo de datos — todos los patrones de SwiftUI núcleo.

Debugging and Previews

El lienzo de vista previa de SwiftUI es su principal herramienta depuración. Si una vista no se ve bien, inspeccione la cadena de modificador y asegúrese de que está utilizando el contenedor de distribución correcto.

• Desapareciendo causando vistas a los bordes táctiles.
• Orden incorrecto de los modificadores (por ejemplo, antecedentes antes de la colocación).
• Usando sin inicializar el objeto.

También puede añadir declaraciones dentro de su o en botones para verificar los cambios del estado. Para depurar el tiempo de ejecución, utilice el menú del Simulador Debug] para ver la jerarquía de la vista y comprobar los conflictos de diseño.

Otra técnica poderosa es usar para ver cómo su interfaz de usuario se ve en diferentes tamaños de dispositivos. También puede añadir múltiples instancias de vista previa para comparar variaciones:

struct ContentView_Previews: PreviewProvider {
 static var previews: some View {
 Group {
 ContentView()
 .previewDevice("iPhone 15 Pro")
 ContentView()
 .previewDevice("iPhone SE (3rd generation)")
 }
 }
}

Rendimiento y mejores prácticas

SwiftUI está diseñado para ser eficiente, pero hay prácticas para mantener tus aplicaciones funcionando sin problemas:

• Utilice modelos identificables para listas para ayudar a SwiftUI a diff y actualizar sólo cambió filas.
• Mantén las vistas pequeñas] – rompe las grandes vistas en componentes más pequeños y reutilizables. Esto mejora la legibilidad y permite que las actualizaciones incrementales de SwiftUI funcionen más granularmente.
• Evitar computaciones costosas en ] – realizar trabajos pesados en modelos de vista o con propiedades. SwiftUI re-evalua cuando el estado cambia, así que manténgalo rápido.
• Prefer para datos visuales locales] y mueve la lógica empresarial compleja a objetos observables.
• Use o ] para evitar re-renderes innecesarios cuando las entradas de la vista no han cambiado.
• Perfil con Instruments] – La plantilla de Xcode ]SwiftUI en Instruments ayuda a identificar actualizaciones de la vista y renderizar cuellos de botella.

Para un paseo por el rendimiento de SwiftUI, compruebe esta guida por Swift con Majid.

Siguientes pasos y recursos

Ahora tienes una sólida fundación en SwiftUI. Para continuar aprendiendo y construyendo aplicaciones más avanzadas:

• Explora los tutoriales oficiales de Apple – Los Tutoriales de SWI de Apple te llevan a través de la construcción de una aplicación completa paso a paso.
• Leer Hacking with Swift – Paul Hudson’s 100 Días de SwiftUI es un curso gratuito y completo.
• Conducir en patrones reactiva] – Aprende Combine (el marco reactiva de la aplicación) para manejar flujos de datos asincrónicos y tuberías de datos complejas.
• Construir un proyecto real – Escoge un concepto de aplicación simple (ya sea, lista de tareas, rastreador de hábitos) y aplicarlo desde cero. La mejor manera de aprender es haciendo.
• Únete a la comunidad – Los foros Swift, los Foros de Desarrolladores de Apple y el subreddit r/SwiftUI son grandes lugares para hacer preguntas y compartir su trabajo.

Conclusión

SwiftUI representa un cambio de paradigma en el desarrollo de la plataforma de Apple. Su sintaxis declarativa, actualizaciones automáticas impulsadas por el estado, y la vista previa en vivo hacen que sea el marco ideal para nuevos desarrolladores de iOS para comenzar a construir aplicaciones funcionales y hermosas rápidamente. Al entender las vistas, modificadores, contenedores de diseño y administración del estado, puede crear interfaces dinámicas con menos código y menos errores.

Sigue experimentando — modifica los ejemplos en esta guía, rompelos y solucionalos. Cada iteración fortalece tu comprensión. A medida que creces, descubrirás cómo SwiftUI se integra con otros marcos de Apple como Core Data, CloudKit y Swift Charts. Las habilidades que desarrollas aquí te servirán bien en todas las plataformas de Apple. ¡Feliz codificación!