Campos de texto: TextField

Al terminar esta lección sabrás escribir un campo de texto en Compose: un cuadro donde la persona teclea, con su rótulo, y con lo escrito guardado donde toca. Verás por qué el campo no recuerda nada por sí solo, qué pasa si olvidas decirle el texto nuevo (no deja escribir) y qué pasa si lo guardas con remember (al girar el móvil, se borra). 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 mejor ejemplo de lo que acabas de aprender: un composable sin estado, que recibe el texto y avisa de cada tecla. Más adelante, el formulario de «añadir jugador» de Marcador se construye con estas mismas piezas. Temas: TextField, OutlinedTextField, rememberSaveable con texto y dónde vive lo escrito.

El concepto · Un campo que enseña lo que le dices

Un campo de texto (text field) es el cuadro donde el usuario escribe con el teclado. En Compose se llama TextField, y tiene dos parámetros que lo mandan todo:

Fíjate en lo que no hace el campo: no guarda lo que escribes. Cuando pulsas una tecla, el campo no cambia su propio texto: avisa («el texto debería ser El Q») y espera a que el dueño le devuelva un value nuevo. Si el dueño no se lo devuelve, el campo sigue enseñando lo de antes.

Ejemplo · Buscar un libro

Un ejemplo solo para leer (no lo escribas en Marcador), con datos ajenos a él: el cuadro de búsqueda de una biblioteca. Usa OutlinedTextField, la versión del campo con borde (la diferencia con TextField, más abajo). Los import los propone Android Studio con Option+Enter sobre cada nombre en rojo.

@Composable
fun BuscadorDeLibros() {
    // El texto escrito. `rememberSaveable`: sobrevive a recomposiciones y a girar el móvil.
    var titulo by rememberSaveable { mutableStateOf("") }
 
    Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
        OutlinedTextField(
            value = titulo,                            // baja: lo que el campo enseña
            onValueChange = { nuevo -> titulo = nuevo }, // sube: cada cambio trae el texto nuevo entero; aquí se guarda
            label = { Text("Título del libro") },      // el rótulo: dentro del campo mientras no lo tocas, y sube al borde cuando escribes
            placeholder = { Text("Por ejemplo, El Quijote") }, // la pista en gris: solo se ve al tocar el campo, mientras está vacío
            singleLine = true,                         // una sola línea: no crece hacia abajo
        )
        Text("Buscarás: $titulo")                      // lee el mismo texto que el campo
    }
}

Lo que se ve. Un campo con el rótulo «Título del libro» dentro (la pista «Por ejemplo, El Quijote» aparece al tocarlo) y debajo Buscarás: (vacío). Al escribir «El Quijote» letra a letra, onValueChange recibe E, El, El , El Q… y cada vez titulo cambia, la pantalla se recompone y el campo y la línea de debajo enseñan lo mismo:

Buscarás: El Quijote

Qué hace cada pieza que no habías visto:

TextField o OutlinedTextField

Son el mismo campo con dos aspectos: TextField tiene el fondo relleno (filled) y OutlinedTextField solo un borde (outlined). Los parámetros son los mismos, así que cambiar de uno a otro es cambiar el nombre.

En el formulario de Marcador usarás OutlinedTextField, y es el que lleva el ejercicio de esta lección.

Dos errores típicos

1 · No decirle al campo el texto nuevo. Compila, y el campo no deja escribir: pulsas teclas y no aparece nada.

var titulo by rememberSaveable { mutableStateOf("") }
OutlinedTextField(
    value = titulo,
    onValueChange = { },          // avisa, pero nadie cambia `titulo`
    label = { Text("Título del libro") },
)

var titulo by rememberSaveable { mutableStateOf("") }
OutlinedTextField(
    value = titulo,
    onValueChange = { titulo = it },   // `it`: el nombre que Kotlin da al único parámetro de la lambda (la función entre llaves); aquí, el texto nuevo entero
    label = { Text("Título del libro") },
)

Falla porque el campo solo enseña value, y value sigue siendo "": la tecla llega, pero nadie la apunta. (En el ejemplo de arriba escribíamos nuevo -> para darle nombre; con it no hace falta, es lo mismo.)

2 · Guardar el texto con remember. Escribes, funciona… y al girar el móvil el campo vuelve a estar vacío.

var titulo by remember { mutableStateOf("") }          // se pierde al girar

var titulo by rememberSaveable { mutableStateOf("") }  // sobrevive al giro

Falla porque al girar, Android destruye la pantalla y crea otra, y remember empieza de cero. Con texto, rememberSaveable funciona directamente: un String cabe en el Bundle.

¿Dónde vive el texto?

Hasta aquí, en la propia pantalla (el composable que contiene el campo). Es lo más sencillo y vale mientras ninguna regla de la app necesite ese texto: el buscador de libros solo lo muestra.

La lógica de negocio son las reglas de la app, las que no dependen de cómo se ve la pantalla. Si una regla necesita el texto («ese nombre ya existe en la plantilla»), el texto sube a un objeto de estado de la pantalla, el ViewModel, que verás más adelante en ViewModel: qué sobrevive, y llega al campo por parámetros. En esta lección no hay ninguna regla, así que el texto se queda en la pantalla.

package com.sebastiannarvaez.marcador.ejercicios.saludo
 
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
 
// `const val`: una constante fija, conocida al compilar. `private`: solo se ve dentro de este fichero. Va fuera de la función, arriba del todo.
private const val MAXIMO = 20                     // caracteres que admite el campo
 
@Composable
fun Saludo(modifier: Modifier = Modifier) {
    var nombre by rememberSaveable { mutableStateOf("") }   // sobrevive al giro
 
    Column(modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
        OutlinedTextField(
            value = nombre,
            // Solo se acepta el texto nuevo si cabe; si no, `nombre` no cambia y el campo se queda como estaba.
            onValueChange = { if (it.length <= MAXIMO) nombre = it },
            label = { Text("Tu nombre") },
            singleLine = true,
        )
        Text(if (nombre.isEmpty()) "Escribe tu nombre" else "Hola, $nombre")
        Text("${nombre.length}/$MAXIMO")
    }
}
 
@Preview(showBackground = true)
@Composable
private fun SaludoPreview() {
    MaterialTheme { Saludo() }
}

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.

Pulsa Run con la configuración app: Marcador se ve y se comporta como al terminar State hoisting. El campo de texto entrará en la app más adelante, en el formulario de añadir un jugador.