Formulario de notas con SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:51

Formulario de notas con SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 13 de 23

Clase 13 / 23

Recursos

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.

Santiago Amaya

Hace 9 meses

//
//  NCreateCardView.swift
//  swiftUIPlatzi2
//
//  Created by Santiago Amaya Cetina on 21/1/26.
//

import SwiftUI

struct NCreateCardView: View {
    @State var title: String = ""
    @State var sizeCard: NCardType = .small
    @State var text: String = ""
    @State var isFavorite: Bool = false

    func onTap(){
        let card = NCard(title: title, text: text, type: sizeCard)
        print("-> ",card)
    }
    
    var body: some View {
        ZStack {
            LiquidBackground()
                .ignoresSafeArea()

            ScrollView {
                VStack {
                    Text("Note's title")
                        .font(.title).bold()
                        .padding(5)

                    // TextField: "glass" background that blends with the liquid gradient (more professional)
                    TextField("Title", text: $title)
                        .font(.headline)
                        .foregroundStyle(.white)
                        .tint(.white) // cursor color
                        .padding()
                        .background(
                            RoundedRectangle(cornerRadius: 20, style: .continuous)
                                .fill(.ultraThinMaterial) // plays nicely with animated background
                        )
                        .overlay(
                            RoundedRectangle(cornerRadius: 20, style: .continuous)
                                .stroke(.white.opacity(0.25), lineWidth: 1)
                        )
                        .textFieldStyle(.plain)
                        .frame(width: 350)
                        .shadow(color: .black.opacity(0.18), radius: 10, x: 0, y: 6)

                    TextEditor(text: $text)
                        .font(.system(size: 16))
                        .foregroundStyle(.white)
                        .scrollContentBackground(.hidden)
                        .background(
                            LinearGradient(
                                colors: [.pink, .purple],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                            .opacity(0.7)
                        )
                        .frame(width: 350, height: 400)
                        .cornerRadius(20)
                        .padding()
                        .shadow(color: .black.opacity(0.4), radius: 5, x: 5, y: 2)

                    HStack {
                        Text("Size")
                            .padding()
                            .foregroundStyle(.white)

                        Spacer()

                        Picker("Sizes", selection: $sizeCard) {
                            Text("Small").tag(NCardType.small)
                            Text("Medium").tag(NCardType.medium)
                        }
                        // Picker text color (what SwiftUI allows reliably across styles)
                        .tint(.white)                 // affects accent + many picker styles
                        .foregroundStyle(.white)       // label color for some styles
                    }

                    Toggle("Is favorite", isOn: $isFavorite)
                        .padding()
                        .tint(.white) // makes the switch accent fit the design
                        .foregroundStyle(.white)

                    Button {
                        onTap()
                    } label: {
                        Text("Save note")
                            .font(.headline).bold()
                            .foregroundStyle(.black)
                            .frame(maxWidth: 300)
                            .padding()
                            .background(
                                RoundedRectangle(cornerRadius: 20, style: .continuous)
                                    .fill(Color.white)
                            )
                            .opacity(0.85)
                    }
                }
            }
        }
    }
}

// MARK: - Liquid Background (MeshGradient iOS 17+/macOS 14+)

private struct LiquidBackground: View {
    var body: some View {
        Group {
            if #available(iOS 17.0, macOS 14.0, *) {
                ZStack {
                    LiquidMeshGradient()

                    // Subtle vignette to make content readable + more “pro” look
                    RadialGradient(
                        colors: [
                            .clear,
                            .black.opacity(0.35)
                        ],
                        center: .center,
                        startRadius: 40,
                        endRadius: 520
                    )
                }
            } else {
                LinearGradient(
                    colors: [
                        Color.blue.opacity(0.85),
                        Color.indigo.opacity(0.75),
                        Color.gray.opacity(0.7)
                    ],
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            }
        }
    }
}

@available(iOS 17.0, macOS 14.0, *)
private struct LiquidMeshGradient: View {

    // Helper outside the ViewBuilder closure
    private func p(_ x: Float, _ y: Float) -> SIMD2<Float> { SIMD2<Float>(x, y) }

    var body: some View {
        TimelineView(.animation) { timeline in
            let t = timeline.date.timeIntervalSinceReferenceDate

            // Keep points in the 0...1 range (more stable/professional result)
            let topMidX: Float   = 0.5 + 0.10 * Float(sin(t * 0.25))
            let midLeftY: Float  = 0.5 + 0.12 * Float(cos(t * 0.22))
            let midRightY: Float = 0.5 + 0.10 * Float(sin(t * 0.20))
            let botMidX: Float   = 0.5 + 0.08 * Float(cos(t * 0.18))

            let points: [SIMD2<Float>] = [
                p(0.0, 0.0),       p(topMidX, 0.0),   p(1.0, 0.0),
                p(0.0, midLeftY),  p(0.5, 0.5),       p(1.0, midRightY),
                p(0.0, 1.0),       p(botMidX, 1.0),   p(1.0, 1.0)
            ]

            // Slightly richer palette with controlled contrast
            let colors: [Color] = [
                .blue.opacity(0.95), .cyan.opacity(0.75), .indigo.opacity(0.95),
                .purple.opacity(0.75), .blue.opacity(0.85), .gray.opacity(0.70),
                .indigo.opacity(0.85), .blue.opacity(0.75), .gray.opacity(0.65)
            ]

            MeshGradient(width: 3, height: 3, points: points, colors: colors)
                .blur(radius: 22)       // softer transitions (“liquid”)
                .saturation(1.10)       // keep color vivid but not neon
                .contrast(1.05)
        }
    }
}

#Preview {
    NCreateCardView()
}

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Formulario de notas con SwiftUI

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos