0Pricing
Android Academy · Lección

Gestión del estado de formularios

Conserve y actualice los valores de los campos mediante el estado

Gestión del estado de formularios es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

De un campo a un formulario

Un solo campo de texto es sencillo. Un formulario real tiene varios: nombre, correo electrónico, contraseña y quizá una casilla de verificación. En esta lección aprenderá formas limpias de conservar y actualizar el estado de un formulario completo en Jetpack Compose.

Si lo hace bien, la validación, el envío y las vistas previas serán mucho más sencillos.

Varios estados independientes

El enfoque más sencillo es usar un mutableStateOf por campo. Cada campo lee y actualiza su propia parte del estado.

Esto funciona perfectamente en formularios pequeños con dos o tres campos.

@Composable
fun LoginForm() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(email, { email = it }, label = { Text("Email") })
        OutlinedTextField(password, { password = it }, label = { Text("Password") })
    }
}

Agrupar el estado en una clase de datos

A medida que los formularios crecen, muchas variables independientes se vuelven difíciles de manejar. Una opción más limpia es modelar todo el formulario como una única data class inmutable.

Conserve una sola parte del estado que contenga ese objeto y actualícela con copy().

data class SignUpState(
    val name: String = "",
    val email: String = "",
    val agreedToTerms: Boolean = false
)

Actualizar con copy()

Como el objeto de estado es inmutable, nunca debe modificarlo directamente. En su lugar, cree una copia nueva con un campo cambiado y vuelva a asignarla.

Esto mantiene predecible el modelo de estado de Compose: un objeto nuevo implica una instantánea nueva, lo que activa la recomposición.

var form by remember { mutableStateOf(SignUpState()) }

OutlinedTextField(
    value = form.name,
    onValueChange = { form = form.copy(name = it) },
    label = { Text("Name") }
)

Una forma completa basada en una clase de datos

Aquí, toda la forma se basa en un único SignUpState. Cada campo actualiza una propiedad mediante copy().

Observe lo sencillo que resulta leer el valor completo de la forma en cualquier momento: basta con usar form.

var form by remember { mutableStateOf(SignUpState()) }

Column {
    OutlinedTextField(
        value = form.name,
        onValueChange = { form = form.copy(name = it) },
        label = { Text("Name") }
    )
    OutlinedTextField(
        value = form.email,
        onValueChange = { form = form.copy(email = it) },
        label = { Text("Email") }
    )
}

Casillas de verificación e interruptores

No todas las entradas son texto. Un Checkbox o un Switch funcionan de la misma manera: un valor booleano y una devolución de llamada onCheckedChange.

Guarde el booleano en el estado de la forma igual que guardaría una cadena.

var form by remember { mutableStateOf(SignUpState()) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(
        checked = form.agreedToTerms,
        onCheckedChange = { form = form.copy(agreedToTerms = it) }
    )
    Text("I agree to the terms")
}

Derivar valores a partir del estado

Una gran ventaja de tener un único origen del estado es que puede calcular valores a partir de él sin guardar variables adicionales. Por ejemplo, puede determinar si la forma está lista para enviarse.

Use derivedStateOf (o una expresión sencilla) para que el resultado se actualice automáticamente cuando cambie la forma.

var form by remember { mutableStateOf(SignUpState()) }

val canSubmit by remember {
    derivedStateOf {
        form.name.isNotBlank() &&
        form.email.isNotBlank() &&
        form.agreedToTerms
    }
}

Button(onClick = { /* submit */ }, enabled = canSubmit) {
    Text("Sign Up")
}

Conservar el estado ante cambios de configuración

remember conserva el estado entre recomposiciones, pero se pierde ante un cambio de configuración, como al girar la pantalla. Para conservar valores sencillos al girar la pantalla, use rememberSaveable.

Funciona de forma predeterminada con tipos primitivos y tipos Parcelable.

var email by rememberSaveable { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

Elevar el estado de la forma a un ViewModel

Para cualquier forma que no sea trivial, mantenga el estado en un ViewModel. Sobrevive a los cambios de configuración y mantiene la lógica de la interfaz fuera del composable.

El composable lee el estado y reenvía los eventos; el ViewModel es la fuente de verdad.

class SignUpViewModel : ViewModel() {
    var state by mutableStateOf(SignUpState())
        private set

    fun onNameChange(value: String) {
        state = state.copy(name = value)
    }
}

Conectar el ViewModel

En el composable, obtenga el ViewModel y vincule cada campo a su estado y a su controlador. La interfaz se mantiene sencilla y fácil de probar.

Esta es la estructura recomendada para las formas de producción.

@Composable
fun SignUpScreen(vm: SignUpViewModel = viewModel()) {
    OutlinedTextField(
        value = vm.state.name,
        onValueChange = vm::onNameChange,
        label = { Text("Name") }
    )
}

Kotlin puro: copy() en acción

El patrón de actualización con copy() no es más que el comportamiento estándar de las clases de datos de Kotlin. Aquí se ejecuta de forma independiente para que pueda ver cómo cada actualización produce un objeto completamente nuevo.

data class SignUpState(
    val name: String = "",
    val email: String = ""
)

fun main() {
    var state = SignUpState()
    state = state.copy(name = "Ada")
    state = state.copy(email = "ada@dev.io")
    println(state)
}

Comprobación rápida

Ha modelado la forma como una data class inmutable almacenada en el estado. ¿Cómo debería actualizar un único campo?

Repaso

Ha aprendido a gestionar el estado de formas completas:

  • Formas pequeñas: un mutableStateOf por campo.
  • Formas grandes: una única data class inmutable, actualizada con copy().
  • Los booleanos controlan Checkbox y Switch de la misma manera que el texto controla los campos.
  • Derive valores como "se puede enviar" en lugar de almacenarlos.
  • Use rememberSaveable para los giros de pantalla y un ViewModel para las pantallas reales.

A continuación: validar las entradas y mostrar errores útiles.

Preguntas frecuentes

¿La lección «Gestión del estado de formularios» es gratis?

Sí — el texto completo de «Gestión del estado de formularios» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Gestión del estado de formularios»?

Conserve y actualice los valores de los campos mediante el estado Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Gestión del estado de formularios»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. TextField y entrada del usuario
  2. Gestión del estado de formularios
  3. Validación de entradas
  4. Opciones y acciones del teclado
← Volver a Android Academy