Android Academy · Lección

Exponer el estado desde ViewModel

Controle la interfaz de Compose desde un ViewModel

Exponer el estado desde ViewModel 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.

Exponer el estado a la UI

Un ViewModel contiene el estado, pero la UI necesita una forma de observarlo y volver a representarse cuando cambia.

En el Android moderno, dos herramientas habituales para esto son StateFlow y State de Compose.

El patrón mutable frente a inmutable

Una práctica recomendada consiste en mantener una propiedad auxiliar mutable privada y exponer una versión pública de solo lectura.

Esto evita que la UI modifique el estado directamente por accidente.

Exponer con StateFlow

Use internamente un MutableStateFlow y expóngalo como un StateFlow de solo lectura.

class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count: StateFlow<Int> = _count.asStateFlow()

    fun increment() {
        _count.value++
    }
}

Recopilar StateFlow en Compose

El Composable convierte el flujo en estado de Compose mediante collectAsState() (o la variante consciente del ciclo de vida que se explica más adelante).

@Composable
fun CounterScreen(vm: CounterViewModel) {
    val count by vm.count.collectAsState()
    Text("Count: " + count)
}

Por qué StateFlow necesita un valor inicial

Un StateFlow siempre tiene un valor actual. Por eso debe proporcionarle un valor inicial al crearlo.

Cualquier nuevo recopilador recibe inmediatamente el valor más reciente, nunca un flujo vacío.

Alternativa: mutableStateOf de Compose

Para estados sencillos y locales de una pantalla dentro del ViewModel, también puede usar mutableStateOf de Compose, que Compose observa automáticamente.

class CounterViewModel : ViewModel() {
    var count by mutableStateOf(0)
        private set

    fun increment() { count++ }
}

StateFlow frente a State de Compose

StateFlow forma parte de las corrutinas de Kotlin y funciona en cualquier lugar, no solo en Compose. Es excelente para flujos compartidos y conscientes del ciclo de vida.
mutableStateOf es específico de Compose y muy conciso.

En general, se prefiere StateFlow para los ViewModels de aplicaciones grandes.

Modelar el estado de la pantalla como un objeto

En lugar de usar muchos flujos separados, agrupe los campos relacionados en una única clase de datos de estado de la UI. Esto mantiene las actualizaciones atómicas y predecibles.

data class ProfileUiState(
    val name: String = "",
    val isLoading: Boolean = false,
    val error: String? = null
)

Exponer el objeto de estado de la UI

Exponga un único StateFlow de esa clase de estado. La UI lee todo desde una única fuente de verdad.

private val _uiState = MutableStateFlow(ProfileUiState())
val uiState: StateFlow<ProfileUiState> =
    _uiState.asStateFlow()

Actualizar un estado inmutable

Actualice el estado generando una copia con los campos modificados, nunca mutando el objeto anterior.

fun load() {
    _uiState.update { it.copy(isLoading = true) }
    // ... fetch, then:
    _uiState.update {
        it.copy(isLoading = false, name = "Ada")
    }
}

Los eventos suben, el estado baja

Este es el principio fundamental del flujo de datos unidireccional:

El estado baja del ViewModel a la interfaz de usuario.
Los eventos suben de la interfaz de usuario al ViewModel mediante llamadas a funciones.

Comprobación rápida

Compruebe su comprensión de la exposición del estado.

Resumen

Ha aprendido lo siguiente:

Mantener un MutableStateFlow privado y exponer un StateFlow de solo lectura.
Agrupar los campos relacionados en una clase de datos de estado de la interfaz de usuario.
Actualizar mediante copy() a través de update {}.
El estado baja y los eventos suben.

Preguntas frecuentes

¿La lección «Exponer el estado desde ViewModel» es gratis?

Sí — el texto completo de «Exponer el estado desde ViewModel» 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 «Exponer el estado desde ViewModel»?

Controle la interfaz de Compose desde un ViewModel 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 «Exponer el estado desde ViewModel»?

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

← Volver a Android Academy