Campos de texto en SwiftUI

Al terminar esta lección sabrás escribir un campo de texto en SwiftUI: un cuadro donde la persona teclea, conectado a un dato con un enlace. Verás cómo se escribe, para qué sirve el $ delante del dato y qué error da Xcode si lo olvidas. No cambias Marcador: practicas en un ejercicio de tu carpeta Ejercicios.

Importa porque casi toda app pide texto en algún momento (un nombre, una búsqueda, un dorsal), y el campo de texto es el primer sitio donde el @Binding que acabas de aprender se usa de verdad: el campo escribe en tu dato cada vez que pulsas una tecla. Más adelante, el formulario de «añadir jugador» de Marcador se construye con estas mismas piezas. Temas: TextField, .textFieldStyle y dónde vive lo escrito.

El concepto · Un campo con una llave al dato

Un campo de texto (text field) es el cuadro donde el usuario escribe con el teclado. En SwiftUI se llama TextField y se crea con dos cosas: un título (también llamado etiqueta: el texto en gris que se ve dentro del campo mientras está vacío) y un enlace al String donde se guarda lo escrito (su tipo es Binding<String>: lo de entre < y > es el tipo del dato al que apunta, como en el Binding<Int> que ya viste):

TextField("Ingrediente", text: $ingrediente)

El campo no guarda el texto: usa la llave que le das. Cada vez que cambias algo, escribe el texto en ingrediente, y como ingrediente es un @State, SwiftUI vuelve a dibujar lo que lo lee. Es el mismo trato que viste con los botones de gol, con otra pieza que escribe.

Ejemplo · Añadir un ingrediente

Un ejemplo solo para leer (no lo escribas en Marcador), con datos ajenos a él: el campo de una receta.

struct AnadirIngrediente: View {
    @State private var ingrediente = ""            // el dato: lo escrito, empieza vacío
 
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            TextField("Ingrediente", text: $ingrediente)   // título en gris + la llave al dato (`$`)
                .textFieldStyle(.roundedBorder)            // un borde redondeado alrededor del campo
            Text("Añadirás: \(ingrediente)")               // lee el mismo dato que el campo escribe
        }
        .padding(16)
    }
}

Lo que se ve. Un campo con «Ingrediente» en gris y debajo Añadirás: (vacío). Al escribir «harina» letra a letra, el campo escribe en ingrediente tras cada tecla, la vista se redibuja y la línea de debajo va creciendo:

Añadirás: harina

Qué hace cada pieza:

Compose frente a SwiftUI

Sobre el giro: en iOS girar el iPhone no destruye la pantalla (lo viste en El ciclo de vida de UIViewController), así que lo escrito en un @State sigue ahí al girar sin que hagas nada especial. Es la diferencia con Android, donde hacía falta rememberSaveable.

Qué pasa si olvidas el $

Es el error de olvidar el $ que viste en @Binding, ahora con un String: el campo pide una llave y le das una fotocopia.

struct Mal: View {
    @State private var ingrediente = ""
    var body: some View {
        TextField("Ingrediente", text: ingrediente)   // `ingrediente` es un String, no un Binding<String>
    }
}

TextField("Ingrediente", text: $ingrediente)

¿Dónde vive el texto?

Igual que en Compose: en la propia vista (el @State) mientras ninguna regla de la app necesite ese texto. El campo de la receta solo lo enseña, así que se queda en la vista. Cuando una regla lo necesite («ese nombre ya existe en la plantilla»), el texto pasará a un objeto de estado, el ViewModel, que verás en MVVM: el estado, el repositorio y el caso de uso, y la vista seguirá escribiendo en él con un enlace.

import SwiftUI
 
// Un saludo con campo de texto y contador. El campo admite como mucho 20 caracteres.
struct PantallaDeSaludo: View {
    private let maximo = 20
    @State private var nombre = ""
 
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            TextField("Tu nombre", text: $nombre)
                .textFieldStyle(.roundedBorder)
            Text(nombre.isEmpty ? "Escribe tu nombre" : "Hola, \(nombre)")
            Text("\(nombre.count)/\(maximo)")
        }
        .padding(16)
        // Si se pasa del máximo, se recorta a los primeros 20 caracteres.
        .onChange(of: nombre) { _, nuevo in
            if nuevo.count > maximo {
                nombre = String(nuevo.prefix(maximo))
            }
        }
    }
}
 
#Preview {
    PantallaDeSaludo()
}

Paso · comprobar que la app no ha cambiado

Objetivo. No hay código nuevo en Marcador: el ejercicio vive en Ejercicios y la app no lo usa. Este paso es comprobar que el ejercicio funciona como dice el enunciado y que la app sigue compilando.

Compila con Cmd+B y ejecuta con Cmd+R: Marcador se ve y se comporta como al terminar @Binding. El campo de texto entrará en la app más adelante, en el formulario de añadir un jugador.