TextField y TextEditor en 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:008:41

TextField y TextEditor en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 10 de 23

Clase 10 / 23

Recursos

Capturar texto del usuario es una de las acciones más comunes en cualquier app, y SwiftUI lo resuelve con dos componentes muy específicos: TextField para entradas cortas como un nombre y TextEditor para textos largos como un comentario. A continuación verás cómo construirlos, enlazarlos a un state y agregar validaciones que respondan en tiempo real.

¿Cómo se crea un TextField en SwiftUI?

Todo empieza creando un archivo nuevo desde la plantilla SwiftUI llamado TextFieldPractice. Dentro del view, reemplazas el texto por un TextField que recibe dos cosas: un placeholder y la variable que va a guardar el texto.

El placeholder es ese texto guía que aparece cuando el campo está vacío, en este caso "Name". Para enlazar el campo con una variable, declaras un state y lo conectas usando el símbolo de dólar.

swift @State var name: String = ""

TextField("Name", text: $name)

¿Para qué sirve el símbolo $ en SwiftUI? Crea un binding entre la vista y el state. Sin él, el TextField no podría leer ni escribir el valor de la variable.

¿Qué modifiers mejoran la apariencia del TextField?

Por defecto el TextField casi no se nota, así que conviene aplicarle estilo con varios modifiers encadenados [1:30]:

.font(.headline) para agrandar la fuente.
.padding() interno para separar el texto del borde.
.background(Color.gray.opacity(0.2)) para un fondo suave.
.cornerRadius(8) para suavizar las esquinas.
.padding() externo para despegarlo del borde de la pantalla.

Con esto el cursor aparece al tocar el campo y todo lo que escribas, como Santiago, queda guardado en la variable name.

¿Cómo escuchar cambios en un TextField con onChange?

Para reaccionar cada vez que el usuario escribe, SwiftUI ofrece el modifier onChange. Este recibe la variable que vas a observar y te entrega un parámetro newValue con el valor actualizado.

swift .onChange(of: name) { newValue in print(newValue) }

Al abrir la consola y escribir letra por letra, cada cambio se imprime en tiempo real. Esa misma lógica es la base para construir validaciones [3:10].

¿Qué hace onChange en SwiftUI? Ejecuta un bloque de código cada vez que el valor de un state cambia, entregándote el nuevo valor para que reacciones a él.

¿Cómo validar la longitud del texto en tiempo real?

La propiedad .count te da la cantidad de caracteres del string. Con un if puedes cambiar el color del fondo cuando supere cierto límite. Como el color va a cambiar dinámicamente, necesita ser otro state:

swift @State var color: Color = Color.gray.opacity(0.2)

.onChange(of: name) { newValue in if newValue.count > 10 { color = .red } else { color = Color.gray.opacity(0.2) } }

En el preview, escribir Santiago mantiene el campo gris, pero al sumar el apellido y pasar de 10 caracteres, el fondo se vuelve rojo. Al borrar y bajar a nueve, regresa al gris.

¿Cuándo usar TextEditor en lugar de TextField?

El TextField está pensado para entradas cortas. Cuando necesitas que el usuario escriba párrafos, comentarios o descripciones largas, el componente correcto es TextEditor [5:20].

La sintaxis es casi idéntica: recibe el binding a un state con el símbolo de dólar.

swift TextEditor(text: $name)

¿Cómo personalizar el fondo del TextEditor?

Por defecto el TextEditor aparece con un fondo blanco que ignora el .background que le pongas. Para resolverlo se usa el modifier scrollContentBackground con visibilidad oculta:

.font(.headline) para mantener consistencia visual.
.padding() interno.
.background(color) con la variable de color.
.cornerRadius(8) para esquinas suaves.
.scrollContentBackground(.hidden) para eliminar el fondo blanco por defecto.
.padding() externo.

Luego replicas la misma validación del TextField, pero ampliando el límite a 50 caracteres porque aquí se espera más contenido. Si olvidas cerrar una llave aparece un error de compilación que se corrige al completar el bloque.

¿Qué diferencia hay entre TextField y TextEditor? TextField captura una sola línea de texto corto, como un nombre. TextEditor admite múltiples líneas y se usa para textos largos como comentarios o descripciones.

Cómo aplicar lo aprendido en tu propia app

Ya tienes los dos componentes funcionando con validación dinámica de longitud y cambio de color en tiempo real. El siguiente paso es experimentar: cambia las fuentes, prueba otros colores de fondo, ajusta los límites de caracteres y construye un diseño que combine con la identidad de tu aplicación.

Cuando termines, toma un screenshot de tu resultado y compártelo en los comentarios para que el resto de la comunidad lo vea.

Resumen

¿Cómo se crea un TextField en SwiftUI?

swift @State var name: String = ""

TextField("Name", text: $name)

¿Para qué sirve el símbolo $ en SwiftUI? Crea un binding entre la vista y el state. Sin él, el TextField no podría leer ni escribir el valor de la variable.

¿Qué modifiers mejoran la apariencia del TextField?

Por defecto el TextField casi no se nota, así que conviene aplicarle estilo con varios modifiers encadenados [1:30]:

.font(.headline) para agrandar la fuente.
.padding() interno para separar el texto del borde.
.background(Color.gray.opacity(0.2)) para un fondo suave.
.cornerRadius(8) para suavizar las esquinas.
.padding() externo para despegarlo del borde de la pantalla.

Con esto el cursor aparece al tocar el campo y todo lo que escribas, como Santiago, queda guardado en la variable name.

¿Cómo escuchar cambios en un TextField con onChange?

Para reaccionar cada vez que el usuario escribe, SwiftUI ofrece el modifier onChange. Este recibe la variable que vas a observar y te entrega un parámetro newValue con el valor actualizado.

swift .onChange(of: name) { newValue in print(newValue) }

Al abrir la consola y escribir letra por letra, cada cambio se imprime en tiempo real. Esa misma lógica es la base para construir validaciones [3:10].

¿Qué hace onChange en SwiftUI? Ejecuta un bloque de código cada vez que el valor de un state cambia, entregándote el nuevo valor para que reacciones a él.

¿Cómo validar la longitud del texto en tiempo real?

swift @State var color: Color = Color.gray.opacity(0.2)

.onChange(of: name) { newValue in if newValue.count > 10 { color = .red } else { color = Color.gray.opacity(0.2) } }

En el preview, escribir Santiago mantiene el campo gris, pero al sumar el apellido y pasar de 10 caracteres, el fondo se vuelve rojo. Al borrar y bajar a nueve, regresa al gris.

¿Cuándo usar TextEditor en lugar de TextField?

El TextField está pensado para entradas cortas. Cuando necesitas que el usuario escriba párrafos, comentarios o descripciones largas, el componente correcto es TextEditor [5:20].

La sintaxis es casi idéntica: recibe el binding a un state con el símbolo de dólar.

swift TextEditor(text: $name)

¿Cómo personalizar el fondo del TextEditor?

Por defecto el TextEditor aparece con un fondo blanco que ignora el .background que le pongas. Para resolverlo se usa el modifier scrollContentBackground con visibilidad oculta:

.font(.headline) para mantener consistencia visual.
.padding() interno.
.background(color) con la variable de color.
.cornerRadius(8) para esquinas suaves.
.scrollContentBackground(.hidden) para eliminar el fondo blanco por defecto.
.padding() externo.

¿Qué diferencia hay entre TextField y TextEditor? TextField captura una sola línea de texto corto, como un nombre. TextEditor admite múltiples líneas y se usa para textos largos como comentarios o descripciones.

Cómo aplicar lo aprendido en tu propia app

Cuando termines, toma un screenshot de tu resultado y compártelo en los comentarios para que el resto de la comunidad lo vea.

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

TextField y TextEditor en 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