Jetpack Compose Academy · Lektion

Eine UiState-Data-Class modellieren

Repräsentieren Sie den Bildschirm mit einem einzigen State-Objekt.

Eine UiState-Data-Class modellieren ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Häufig gestellte Fragen

Ist die Lektion „Eine UiState-Data-Class modellieren“ kostenlos?

Ja — der vollständige Text von „Eine UiState-Data-Class modellieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Eine UiState-Data-Class modellieren“?

Repräsentieren Sie den Bildschirm mit einem einzigen State-Objekt. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Eine UiState-Data-Class modellieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy