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.
