La forma más nueva: TextFieldState y SecureTextField

Al terminar esta lección conocerás la segunda forma de escribir un campo de texto en Compose, la que Google recomienda hoy: en lugar de un String suelto y un aviso por cada tecla, el campo recibe un objeto que guarda su texto, TextFieldState. También sabrás ocultar una contraseña, de la forma clásica (la de value y onValueChange, la que has usado hasta ahora) y con SecureTextField, y por qué Marcador sigue con la forma clásica. No cambia ningún fichero de la app: el trabajo es leer, comparar y escribir en tu carpeta ejercicios una pantalla de acceso con correo y contraseña, de las dos formas.

Importa porque verás las dos formas en el mundo real: los proyectos y los ejemplos que ya existen usan casi siempre value y onValueChange, y los nuevos, cada vez más, TextFieldState. Si solo conoces una, la otra se lee como un idioma distinto. Temas: rememberTextFieldState, lineLimits, state.text, PasswordVisualTransformation, SecureTextField y textObfuscationMode.

Dos formas de guardar el texto

Un campo de texto necesita guardar en algún sitio lo que el usuario ha escrito. La diferencia entre las dos formas es quién lo guarda.

Esto no contradice lo que viste en Formularios: el estado y las reglas: allí, con la forma clásica, el texto va en un mutableStateOf, que es lo que encaja con value y onValueChange. La forma nueva es otra, con su propio objeto, y es la que Google recomienda para los campos que se escriben hoy.

Un «cambio de configuración» es, por ejemplo, girar el móvil, como viste en Rotación y muerte del proceso. De ahí que no haga falta rememberSaveable: rememberTextFieldState() ya recuerda el objeto y lo guarda para restaurarlo.

El estado como objeto

Cuatro piezas y ya se puede leer cualquier campo de la forma nueva:

• rememberTextFieldState() crea el objeto y lo recuerda entre pasadas. Admite un texto inicial: rememberTextFieldState(initialText = "Ana").
• state = … sustituye a value y onValueChange en el campo. El campo ya no necesita que le bajes el texto ni que le subas las teclas.
• lineLimits = TextFieldLineLimits.SingleLine dice cuántas líneas admite: una sola, o varias.
• state.text es el texto de ahora. Si lo lees dentro de una función @Composable, esa función se vuelve a pintar cada vez que el texto cambia, igual que con un mutableStateOf. Es un texto de tipo CharSequence (una secuencia de caracteres): isNotBlank(), length y contains funcionan, y toString() lo convierte en un String cuando hace falta uno, por ejemplo para toIntOrNull().

Un ejemplo para leer, con datos ajenos a Marcador: el alta de un socio de la lección anterior, con la forma nueva. No hace falta escribirlo; el ejercicio de más abajo usa las mismas piezas.

@Composable
fun AltaDeSocioNueva() {
    // El estado de cada campo es un OBJETO que se recuerda; ya no hay un String suelto
    val correo = rememberTextFieldState()
    val edad = rememberTextFieldState()
 
    // Leer `.text` aquí hace que la pantalla se vuelva a pintar cuando el texto cambia
    val sePuedeAnotar = correo.text.contains("@") && edad.text.toString().toIntOrNull() != null
 
    Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
        OutlinedTextField(
            state = correo,                                       // el objeto, no `value`
            label = { Text("Correo") },
            lineLimits = TextFieldLineLimits.SingleLine,          // en lugar de singleLine = true
            modifier = Modifier.fillMaxWidth(),
        )
        OutlinedTextField(
            state = edad,
            label = { Text("Edad") },
            lineLimits = TextFieldLineLimits.SingleLine,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),   // igual que antes
            modifier = Modifier.fillMaxWidth(),
        )
        Button(onClick = {}, enabled = sePuedeAnotar, modifier = Modifier.fillMaxWidth()) {
            Text("Anotar socio")
        }
        Text("Has escrito: ${correo.text}")
    }
}

Lo que se vería: dos campos, Correo y Edad, el botón Anotar socio gris y, debajo, «Has escrito: » sin nada. Si escribieras ana@correo.es, la línea de abajo se llenaría letra a letra, sin que ninguna función haga nada. El botón seguiría gris hasta que la edad fuera un número: con 18, se activaría. Y si giraras el emulador, lo escrito seguiría ahí.

Fíjate en lo que no hay: ni var … by, ni onValueChange, ni rememberSaveable. Y lo que no cambia: label, modifier y keyboardOptions se escriben igual que antes.

Contraseñas, de las dos formas

La forma clásica. Un campo de contraseña tiene que pintar puntos en lugar de letras, pero guardar las letras de verdad. Eso lo hace visualTransformation: una transformación que cambia cómo se ve el texto sin cambiar el texto. PasswordVisualTransformation() pinta cada carácter como un punto, y VisualTransformation.None lo deja como está. Con una bandera que alterna entre las dos y un botón al final del campo sale el «Ver / Ocultar» que tienen muchas apps. Dos piezas nuevas: trailingIcon es el hueco al final del campo (admite cualquier composable) y TextButton es un botón sin relleno, solo texto. Y KeyboardType.Password pide al teclado su modo de contraseñas.

@Composable
fun CodigoDeTaquilla() {
    var codigo by rememberSaveable { mutableStateOf("") }          // lo escrito (las letras de verdad)
    var verCodigo by rememberSaveable { mutableStateOf(false) }    // ¿se ve o se oculta?
    OutlinedTextField(
        value = codigo,
        onValueChange = { codigo = it },
        label = { Text("Código de la taquilla") },
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),   // teclado de contraseñas
        // Un botón de texto al final del campo que da la vuelta a la bandera
        trailingIcon = {
            TextButton(onClick = { verCodigo = !verCodigo }) {
                Text(if (verCodigo) "Ocultar" else "Ver")
            }
        },
        // Oculto: cada carácter se pinta como un punto. Visible: el texto tal cual
        visualTransformation = if (verCodigo) VisualTransformation.None else PasswordVisualTransformation(),
    )
}

Escribe «4821» con Ver pulsado y se lee 4821; púlsalo otra vez y se ve ••••. El texto guardado es el mismo en los dos casos: solo cambia el dibujo.

La forma nueva. Necesitaba tres piezas: una transformación, una bandera y un botón. Con TextFieldState hay un campo hecho para eso: SecureTextField (y OutlinedSecureTextField, con borde). Recibe un TextFieldState y oculta lo que escribes sin que le digas nada.

@Composable
fun PinDeTaquilla() {
    val pin = rememberTextFieldState()                    // el estado, como en cualquier campo nuevo
    OutlinedSecureTextField(
        state = pin,
        label = { Text("PIN de la taquilla") },
        // Nada más: sin visualTransformation, sin bandera y sin botón. Si quisieras otro modo:
        // textObfuscationMode = TextObfuscationMode.Hidden   (oculta todo, incluso el último carácter)
        modifier = Modifier.fillMaxWidth(),
    )
}

textObfuscationMode es el parámetro que decide cómo se oculta el texto: Hidden lo oculta todo, RevealLastTyped deja ver el último carácter un instante (lo justo para comprobar que has pulsado bien) y Visible lo enseña entero. Si no lo pones, usa RevealLastTyped: al escribir «4821» ves un instante el último dígito y enseguida todo en puntos. Un botón Ver / Ocultar sería alternar ese parámetro entre dos valores.

¿Y por qué Marcador no lo usa?

Google recomienda la forma nueva, y aun así el formulario de Marcador usa la clásica. Hay dos razones, y las dos son de esta app, no un defecto de TextFieldState.

1. El «tocado». El formulario de añadir jugador marca un campo como tocado en el momento en que llega una tecla: alEscribirNombre hace copy(nombre = texto, nombreTocado = true). Con TextFieldState no llega ninguna tecla a tu código: el campo escribe directamente en el objeto. Para enterarte de que el usuario ha escrito habría que vigilar el objeto con bastante más código, y es más de lo que el formulario necesita.
2. Los datos normales. El formulario de Marcador es una data class con reglas que se prueban con textos normales y corrientes, y que pueden viajar tal cual a otro sitio: si algún día esas reglas se compartieran con otra plataforma, como iOS, un String dentro de una data class lo entienden las dos. Un TextFieldState es un objeto de Compose y solo lo entiende Android.

Esto es lo que conviene llevarse: no es mejor ni peor, es una decisión. Para un campo suelto de una app solo Android, usa la forma nueva. Para un formulario cuyas reglas ya viven en una clase de datos, o que se comparte con otra plataforma, la clásica encaja mejor.

package com.sebastiannarvaez.marcador.ejercicios.acceso
 
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
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.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
 
private const val MINIMO = 6
 
@Composable
fun AccesoContent(
    correo: String,
    contrasena: String,
    verContrasena: Boolean,
    puedeEntrar: Boolean,
    onCorreo: (String) -> Unit,
    onContrasena: (String) -> Unit,
    onVer: () -> Unit,
    onEntrar: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
        OutlinedTextField(
            value = correo,
            onValueChange = onCorreo,
            label = { Text("Correo") },
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email, imeAction = ImeAction.Next),
            modifier = Modifier.fillMaxWidth(),
        )
        OutlinedTextField(
            value = contrasena,
            onValueChange = onContrasena,
            label = { Text("Contraseña") },
            singleLine = true,
            trailingIcon = {
                TextButton(onClick = onVer) { Text(if (verContrasena) "Ocultar" else "Ver") }
            },
            visualTransformation = if (verContrasena) VisualTransformation.None else PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password, imeAction = ImeAction.Done),
            keyboardActions = KeyboardActions(onDone = { if (puedeEntrar) onEntrar() }),
            modifier = Modifier.fillMaxWidth(),
        )
        Button(onClick = onEntrar, enabled = puedeEntrar, modifier = Modifier.fillMaxWidth()) {
            Text("Entrar")
        }
    }
}
 
@Composable
fun Acceso() {
    var correo by rememberSaveable { mutableStateOf("") }
    var contrasena by rememberSaveable { mutableStateOf("") }
    var ver by rememberSaveable { mutableStateOf(false) }
    // Se calcula en cada pasada a partir del texto: no se guarda, así no puede quedarse viejo
    val puedeEntrar = correo.isNotBlank() && contrasena.length >= MINIMO
    AccesoContent(
        correo = correo,
        contrasena = contrasena,
        verContrasena = ver,
        puedeEntrar = puedeEntrar,
        onCorreo = { correo = it },
        onContrasena = { contrasena = it },
        onVer = { ver = !ver },
        onEntrar = {},
    )
}
 
@Preview(showBackground = true)
@Composable
private fun AccesoOcultoPreview() {
    MaterialTheme {
        AccesoContent(
            correo = "ana@correo.es",
            contrasena = "123456",
            verContrasena = false,
            puedeEntrar = true,
            onCorreo = {},
            onContrasena = {},
            onVer = {},
            onEntrar = {},
        )
    }
}
 
@Preview(showBackground = true)
@Composable
private fun AccesoPreview() {
    MaterialTheme { Acceso() }
}

package com.sebastiannarvaez.marcador.ejercicios.acceso_nuevo
 
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedSecureTextField
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
 
private const val MINIMO = 6
 
@Composable
fun AccesoNuevo() {
    val correo = rememberTextFieldState()
    val contrasena = rememberTextFieldState()
    val puedeEntrar = correo.text.isNotBlank() && contrasena.text.length >= MINIMO
 
    Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
        OutlinedTextField(
            state = correo,
            label = { Text("Correo") },
            lineLimits = TextFieldLineLimits.SingleLine,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email, imeAction = ImeAction.Next),
            modifier = Modifier.fillMaxWidth(),
        )
        OutlinedSecureTextField(
            state = contrasena,
            label = { Text("Contraseña") },
            modifier = Modifier.fillMaxWidth(),
        )
        Button(onClick = {}, enabled = puedeEntrar, modifier = Modifier.fillMaxWidth()) {
            Text("Entrar")
        }
    }
}
 
@Preview(showBackground = true)
@Composable
private fun AccesoNuevoPreview() {
    MaterialTheme { AccesoNuevo() }
}

Con esto el formulario de Marcador queda completo: ya guarda jugadores de verdad. Falta una última idea de Android, que usarás en toda la app y que se reparte en cuatro lecciones, la primera de ellas Estado de toda la app: el partido en juego. El mismo formulario en iOS lo escribirás cuando Swift y SwiftUI estén aprendidos, en Equipos y plantillas en iOS.