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.

¿Cuál es la base del formulario?

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
            }
        }
    }
}

¿Cómo añadir un título?

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)

¿Cómo se implementa un TextField?

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()

¿Para qué usar un TextEditor?

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()

¿Cómo introducir un Picker?

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()

¿Cómo se añade un Toggle?

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()

¿Cómo se configura un botón con funcionalidad?

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
}

¿Qué pasa al ejecutar el formulario?

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!