Fundamentos de SwiftUI y desarrollo de Interfaces
Desarrolla Apps Increíbles: primeros pasos con SwiftUI
Creación de views y uso de preview
Personalización de views con modifiers y uso de shapes
Image render
Composición de Layouts con Stacks
ScrollView y carousel
List y ForEach
Estructurando nuestra app
Quiz: Fundamentos de SwiftUI y desarrollo de Interfaces
Interacción del Usuario y Componentes de Entrada
Button y manejo de estado con @State
Text Field y Text Editor
Picker y DatePicker
Toggle y Slider
Formularios
Alertas y Modales
Gestures
Animaciones y uso del ProgressView
Quiz: Interacción del Usuario y Componentes de Entrada
Manejo del Estado y Arquitectura con ViewModels
ViewModels y @ObservedObject
Compartir Datos con @EnvironmentObject
Creación de Componentes Reutilizables con @Binding
Quiz: Manejo del Estado y Arquitectura con ViewModels
Navegación Avanzada
Navegación con NavigationStack
Personalización de la Barra de Navegación
Quiz: Navegación Avanzada
Lanzamiento de la app
Funcionalidades extra
Lanzamiento en simulador
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Desarrollar formularios permite a los usuarios de tu aplicación introducir y gestionar datos de manera estructurada. Pondremos en práctica los conocimientos adquiridos sobre campos de texto (text fields), editores de texto (text editors), selectores (pickers), y toggles creando un formulario desde cero para añadir notas en nuestra aplicación.
La construcción del formulario comienza con la creación de un nuevo archivo SwiftUI en la carpeta de vistas. Nombramos este archivo como CreateNoteView.swift
. La base de nuestro formulario será una combinación de ScrollView
y VStack
, lo que nos permitirá organizar los elementos de manera vertical y desplazarlos a través de la pantalla si es necesario.
struct CreateNoteView: View {
var body: some View {
ScrollView {
VStack {
// Aquí agregarán los elementos del formulario
}
}
}
}
Para empezar, incorporamos un título visualmente atractivo con propiedades específicas para diferenciarlo del resto de los elementos. Usaremos el texto "Crear nueva nota" como título.
Text("Crear nueva nota")
.font(.largeTitle)
.fontWeight(.bold)
.padding(.bottom, 10)
El siguiente paso es incluir un TextField
para permitir que los usuarios inserten el título de la nota. Es esencial que este campo esté conectado a una variable @State
que almacenará el texto introducido.
@State private var titulo: String = ""
TextField("Título", text: $titulo)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
Utilizamos un TextEditor
para ofrecer un área amplia donde se puede escribir la descripción o el cuerpo de la nota. Este editor de texto también estará vinculado a una variable @State
.
@State private var texto: String = ""
TextEditor(text: $texto)
.frame(height: 200)
.overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray))
.padding()
Para dar más interactividad a nuestro formulario, introducimos un Picker
que permitirá seleccionar el tamaño de la nota, utilizando una interfaz gráfica sencilla combinada con un HStack
para incluir etiquetas descriptivas.
@State private var size: String = "Mediano"
let sizes = ["Pequeño", "Mediano", "Grande"]
HStack {
Text("Tamaño")
Spacer()
Picker("Tamaño", selection: $size) {
ForEach(sizes, id: \.self) { size in
Text(size)
}
}
.pickerStyle(SegmentedPickerStyle())
}
.padding()
Un Toggle
es ideal para ofrecer opciones binarias, como marcar una nota como favorita. Nuevamente, se asocia a una variable @State
.
@State private var isFavorite: Bool = false
Toggle("Marcar como favorito", isOn: $isFavorite)
.padding()
Finalmente, integramos un botón que, al ser presionado, guardará la nueva nota. Este botón estará acompañado por su lógica, llamando a una función que se encargará de procesar y almacenar la información.
Button(action: {
onTap()
}) {
Text("Guardar Nota")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
.padding()
func onTap() {
let card = NCard(title: titulo, text: texto, size: size, isFavorite: isFavorite)
print("Esta es tu nueva nota: \(card)")
// Aquí se puede añadir la lógica para almacenar la nota
}
Al pasar el cursor sobre el formulario en la vista previa, observamos cómo los elementos interactúan entre ellos. El formulario visualmente se ve atractivo gracias a los modifiers
(como padding
y background
) que mejoran la estética. Cada cambio en las variables de estado se refleja de inmediato, proporcionando una interfaz dinámica y responsiva.
La construcción de un formulario completo en SwiftUI no solo cubre los aspectos visuales, sino también la lógica funcional subyacente, permitiendo que tu aplicación se vea moderna, eficiente y fácil de usar. ¡Sigue explorando SwiftUI para perfeccionar tus habilidades y construir aplicaciones únicas!
Aportes 0
Preguntas 0
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?