Construir un formulario en SwiftUI se vuelve sencillo cuando combinas componentes que ya conoces: TextField, TextEditor, Picker, Toggle y Button. Aquí verás cómo unir todas estas piezas dentro de un ScrollView con VStack para crear una nota funcional, ideal si estás desarrollando tu primer proyecto en iOS.

Cómo estructurar la base del formulario en SwiftUI

Todo formulario necesita un contenedor que permita desplazarse cuando los elementos crecen. Por eso, la combinación de ScrollView con VStack es el punto de partida.

Dentro de la carpeta views, creas un nuevo archivo SwiftUI llamado NCreateNoteView [00:25]. Sobre esa base, agregas un ScrollView y dentro un VStack que contendrá cada componente del formulario.

El primer elemento es el título visible para el usuario:

swift Text("Crear nueva nota") .font(.largeTitle) .bold() .padding(.bottom, 10)

Este bloque define jerarquía visual con largeTitle, peso bold y un padding inferior de 10 para separarlo de los siguientes campos [01:05].

¿Para qué sirve un ScrollView en SwiftUI? Es un contenedor que permite desplazar verticalmente el contenido cuando este excede el tamaño de la pantalla. Es ideal para formularios largos.

Cómo agregar campos de texto y editor con estados

Los formularios viven de los datos que captura el usuario, y SwiftUI maneja esto con la propiedad @State.

Para el título de la nota usas un TextField enlazado a una variable de estado mediante el símbolo $. Para el cuerpo, un TextEditor enlazado a otra variable text inicializada como string vacío [01:45].

swift @State var title: String = "" @State var text: String = ""

TextField("Título", text: $title) TextEditor(text: $text)

Ambos componentes reutilizan los modifiers que ya practicaste en retos anteriores, como bordes, padding o color de fondo.

Cómo añadir un picker con etiqueta usando HStack

El Picker permite escoger el tamaño de la nota, pero por defecto no muestra una etiqueta clara. La solución es envolverlo en un HStack junto a un Text y un Spacer [02:45]:

swift HStack { Text("Tamaño") Spacer() Picker("", selection: $size) { ... } }

El Spacer empuja el Picker hacia la derecha y deja la etiqueta alineada a la izquierda, replicando el patrón visual típico de los formularios iOS.

Cómo usar Toggle para valores booleanos

Para marcar una nota como favorita necesitas un Toggle, que recibe dos parámetros: el título y un binding a una variable booleana [03:30]:

swift @State var isFavorite: Bool = false

Toggle("Marcar como favorito", isOn: $isFavorite)

Este componente convierte cualquier valor true/false en un interruptor visual familiar para el usuario.

Cómo dar estilo profesional al formulario con modifiers

Un formulario funcional no siempre se ve bien. Aquí entran los modifiers que cambian la apariencia sin tocar la lógica.

Al final del ScrollView aplicas esta secuencia [04:30]:

• padding general para separar el contenido de los bordes.
• background .cyan con opacity(0.2) para el fondo exterior.
• padding extra antes de un background blanco que envuelve el formulario.
• cornerRadius de 16 para suavizar las esquinas.

El orden importa: el cornerRadius debe ir justo después del background blanco para que afecte solo a esa capa y no al fondo cyan.

¿Por qué el orden de los modifiers cambia el resultado? Porque cada modifier se aplica sobre el resultado del anterior, como capas. Cambiar el orden cambia qué capa recibe el efecto.

Para separar visualmente los últimos componentes, agregas .padding() al Picker y al Toggle. En el botón usas .padding(.top, 20) para que solo se aleje del Toggle sin desalinearse del resto.

Cómo conectar el botón con una función onTap

Un formulario sin acción no sirve de nada. Aquí transformas el botón en algo funcional creando una instancia del modelo NCard.

Declaras la función arriba de la vista [06:15]:

swift func onTap() { let card = NCard(title: title, text: text, type: size) print("Esta es tu nueva card:", card) }

Luego, en el botón, reemplazas el comentario por una llamada a onTap(). Cuando el usuario presiona Guardar nota, la consola imprime el objeto con sus tres valores capturados.

Qué hace falta agregar al modelo NCard

El modelo actual no contempla el campo isFavorite. El reto consiste en modificar NCard para incluir esta propiedad booleana y resolver los errores de compilación que aparezcan en los inicializadores.

Los elementos clave que ya tienes en este formulario:

• TextField con binding al título.
• TextEditor para el cuerpo de la nota.
• Picker con etiqueta dentro de un HStack.
• Toggle para el estado de favorito.
• Button con función onTap que crea un NCard.

Este patrón de combinar componentes con estados y modifiers es la base para cualquier formulario más complejo que construyas después. ¿Qué otros campos agregarías tú a esta nota? Cuéntame en los comentarios.