Modelar una clase de datos UiState
Represente la pantalla con un único objeto de estado.
Modelar una clase de datos UiState es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 3 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 Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
One Object for the Screen
Instead of juggling many separate fields, model the whole screen with a single UiState data class that describes exactly what to draw.
data class ProfileUiState(
val name: String = "",
val isLoading: Boolean = false
)Why One State Object
Grouping fields together prevents impossible combinations and makes the UI a pure function of one value: same state in, same screen out.
Make It Immutable
Use val properties so a UiState can never be mutated in place. You always produce a new state, which keeps Compose updates predictable.
Updating With copy
Data classes give you copy() for free, so you can build the next state by changing only the fields that differ.
val next = state.copy(isLoading = false)Modeling Loading
Capture progress with a flag like isLoading so the UI can show a spinner while work runs, all from the same state object.
Modeling Errors
Add a nullable errorMessage field. When it is non-null, the screen shows the error; when null, everything is fine. ⚠️
data class UiState(
val items: List<Item> = emptyList(),
val errorMessage: String? = null
)Sealed Classes for Phases
For mutually exclusive phases, a sealed hierarchy is cleaner: Loading, Success, and Error become distinct types you handle exhaustively.
sealed interface UiState {
object Loading : UiState
data class Success(val data: List<Item>) : UiState
}Sensible Defaults
Give every property a default value so the initial state is one easy expression and new screens start in a clean, known condition.
private val _state = MutableStateFlow(ProfileUiState())Exposing It Read-Only
Hold a mutable state inside the ViewModel but expose it as a read-only type, so only the ViewModel may change the screen’s state.
val state: StateFlow<ProfileUiState> = _state.asStateFlow()Rendering From It
Your Composable reads one UiState and branches on its fields. The render logic stays tiny because the state already says what to show.
Single Source of Truth
A UiState class becomes the single source of truth for the screen, so your UI and logic can never quietly drift out of sync. ✨
Quick Check
Test your modeling instincts for screen state.
Recap
Model the screen with one immutable UiState data class, update it with copy(), expose it read-only, and let the UI render purely from that single source.
Preguntas frecuentes
¿La lección «Modelar una clase de datos UiState» es gratis?
Sí — el texto completo de «Modelar una clase de datos UiState» 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 Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Modelar una clase de datos UiState»?
Represente la pantalla con un único objeto de estado. Practicas Jetpack Compose 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 Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose 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 3 de 4.
¿Cuánto tiempo toma la lección «Modelar una clase de datos UiState»?
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 Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose 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
- Por qué ViewModel sobrevive a la rotación
- viewModel() en un Composable
- Modelar una clase de datos UiState
- collectAsStateWithLifecycle