Kotlin Academy · leksjon

Modellere UI-tilstand med sealed-klasser

Bruk sealed-klasser til å representere UI-tilstandene Loading, Success og Error.

Leksjon 3 av 413 trinn

Modellere UI-tilstand med sealed-klasser er en gratis leksjon i Kotlin Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Kotlin Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Kotlin Academy inneholder totalt 4 leksjoner.

Problemet med UI-tilstand

UI-skjermer har flere tilstander: lasting, visning av data, visning av en feil eller tom visning. Det er skjørt å håndtere disse med boolske variabler (isLoading, hasError). Sealed-klasser løser dette.

Det klassiske boolske kaoset

Bruk av separate boolske variabler fører til umulige tilstander.
// Fragile: isLoading=true AND hasError=true is invalid
var isLoading = false
var hasError = false
var data: List<Item>? = null
// 8 combinations, most of which are invalid!

Sealed-tilstand: Bare gyldige tilstander

En sealed class gjør ugyldige tilstander umulige å representere.
sealed class UiState<out T>
object Loading : UiState<Nothing>()
data class Success<T>(val data: T) : UiState<T>()
data class Error(val message: String, val retryable: Boolean = true) : UiState<Nothing>()
object Empty : UiState<Nothing>()

Gjengivelse basert på tilstand

Bruk when til å gjengi riktig UI for hver tilstand.
fun render(state: UiState<List<Item>>) = when (state) {
    Loading -> showProgressBar()
    is Success -> showItems(state.data)
    is Error -> showError(state.message, state.retryable)
    Empty -> showEmptyView()
}

ViewModel sender ut tilstander

En ViewModel sender ut sealed-tilstander via StateFlow.
class ItemViewModel : ViewModel() {
    private val _state = MutableStateFlow<UiState<List<Item>>>(Loading)
    val state: StateFlow<UiState<List<Item>>> = _state

    fun loadItems() = viewModelScope.launch {
        _state.value = Loading
        _state.value = try {
            Success(repository.getItems())
        } catch (e: Exception) {
            Error(e.message ?: "Unknown error")
        }
    }
}

Kombinere tilstander med innhold

Bruk generiske sealed-tilstander for å håndtere alle datatyper.
fun <T> loading(): UiState<T> = Loading
fun <T> success(data: T): UiState<T> = Success(data)
fun <T> error(msg: String): UiState<T> = Error(msg)

Eksempel på pagineringstilstand

Sealed-klasser er naturlig egnet til å modellere tilstander for paginerte lister.
sealed class PageState
object Idle : PageState()
object FirstLoad : PageState()
data class Content(val items: List<Item>, val hasMore: Boolean) : PageState()
data class LoadingMore(val items: List<Item>) : PageState()
data class Error(val items: List<Item>?, val msg: String) : PageState()

Transformere tilstand

Kartlegg vellykkede tilstander uten å berøre de andre tilfellene.
fun <T, R> UiState<T>.mapData(transform: (T) -> R): UiState<R> = when (this) {
    is Success -> Success(transform(data))
    is Error -> this
    Loading -> Loading
    Empty -> Empty
}

Testing med sealed-tilstander

Tilstander er enkle å teste – kontroller bare hvilken variant som ble sendt ut.
@Test
fun testLoadingState() {
    viewModel.loadItems()
    assertEquals(Loading, viewModel.state.value)
}
@Test
fun testSuccessState() {
    viewModel.setData(listOf(item))
    assert(viewModel.state.value is Success)
}

Kombinert tilstand kontra flere flyter

Én sealed-tilstandsstrøm er ryddigere enn flere separate strømmer som må holdes synkronisert.
// Fragile: two flows must stay in sync
val loading = MutableStateFlow(false)
val error = MutableStateFlow<String?>(null)

// Clean: one sealed state
val state = MutableStateFlow<UiState<List<Item>>>(Loading)

Legge til metadata i tilstander

Sealed-undertyper kan inneholde relevante metadata.
data class Error(
    val message: String,
    val code: Int = 0,
    val retryable: Boolean = true,
    val timestamp: Long = System.currentTimeMillis()
) : UiState<Nothing>()

Hurtigsjekk

Hvilket viktig problem løser modellering av UI-tilstand med sealed-klasser?

Oppsummering

Modeller UI-tilstand med sealed-klasser: Loading, Success(data), Error(message), Empty. Bruk when til å gjengi hvert tilfelle. Én StateFlow med en sealed-type er bedre enn flere boolske flagg. Neste: nøsting av sealed-hierarkier!
Gratis å komme i gang

Lær deg Kotlin med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
51
Leksjoner
203

Ofte stilte spørsmål

Er leksjonen «Modellere UI-tilstand med sealed-klasser» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Kotlin Academy, inkludert «Modellere UI-tilstand med sealed-klasser», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Kotlin Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Modellere UI-tilstand med sealed-klasser»?

Bruk sealed-klasser til å representere UI-tilstandene Loading, Success og Error. Du øver på Kotlin Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Kotlin Academy?

Ingen tidligere erfaring er nødvendig. Kotlin Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Modellere UI-tilstand med sealed-klasser»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Kotlin Academy-leksjonen?

Ja. Alle Kotlin Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. sealed class kontra sealed interface: Når bør de brukes
  2. Uttømmende when med sealed-hierarkier
  3. Modellere UI-tilstand med sealed-klasser
  4. Nesting og kombinasjon av sealed-hierarkier
← Tilbake til Kotlin Academy