Kotlin Academy · Leçon

Modéliser l’état de l’interface utilisateur avec des classes scellées

Utilisez des classes scellées pour représenter les états d’interface Loading, Success et Error.

Leçon 3 sur 413 étapes

Modéliser l’état de l’interface utilisateur avec des classes scellées est une leçon Kotlin Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Kotlin Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Kotlin Academy comprend 4 leçons au total.

Le problème des états d'interface utilisateur

Les écrans d'interface utilisateur ont plusieurs états : chargement, affichage des données, affichage d'une erreur ou état vide. Les gérer avec des booléens (isLoading, hasError) est fragile. Les classes scellées résolvent ce problème.

L'enfer classique des booléens

L'utilisation de booléens séparés mène à des états impossibles.
// 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!

État scellé&nbsp;: uniquement des états valides

Une classe scellée rend les états invalides impossibles à représenter.
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>()

Rendu selon l'état

Utilisez une expression conditionnelle pour afficher l'interface utilisateur correcte pour chaque état.
fun render(state: UiState<List<Item>>) = when (state) {
    Loading -> showProgressBar()
    is Success -> showItems(state.data)
    is Error -> showError(state.message, state.retryable)
    Empty -> showEmptyView()
}

Émission des états par le ViewModel

Un ViewModel émet des états scellés 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")
        }
    }
}

Composer des états avec leur contenu

Utilisez des états scellés génériques pour gérer n'importe quel type de données.
fun <T> loading(): UiState<T> = Loading
fun <T> success(data: T): UiState<T> = Success(data)
fun <T> error(msg: String): UiState<T> = Error(msg)

Exemple d'état de pagination

Les classes scellées représentent naturellement les états des listes paginées.
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()

Transformer un état

Mappez les états réussis sans modifier les autres cas.
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
}

Tester avec des états scellés

Les états sont faciles à tester : il suffit de vérifier quelle variante a été émise.
@Test
fun testLoadingState() {
    viewModel.loadItems()
    assertEquals(Loading, viewModel.state.value)
}
@Test
fun testSuccessState() {
    viewModel.setData(listOf(item))
    assert(viewModel.state.value is Success)
}

État combiné ou flux multiples

Un flux d'état scellé unique est plus clair que plusieurs flux distincts qui doivent rester synchronisés.
// 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)

Ajouter des métadonnées aux états

Les sous-types scellés peuvent contenir les métadonnées pertinentes.
data class Error(
    val message: String,
    val code: Int = 0,
    val retryable: Boolean = true,
    val timestamp: Long = System.currentTimeMillis()
) : UiState<Nothing>()

Vérification rapide

Quel problème essentiel la modélisation de l'état de l'interface utilisateur avec des classes scellées permet-elle de résoudre ?

Récapitulatif

Modélisez l'état de l'interface utilisateur avec des classes scellées : Loading, Success(data), Error(message), Empty. Utilisez une expression conditionnelle pour afficher chaque cas. Un StateFlow contenant un type scellé est préférable à plusieurs indicateurs booléens. Ensuite : imbriquer les hiérarchies scellées !
Gratuit pour commencer

Apprends Kotlin avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
51
Leçons
203

Questions Fréquemment Posées

La leçon « Modéliser l’état de l’interface utilisateur avec des classes scellées » est-elle gratuite ?

Oui — le texte complet de « Modéliser l’état de l’interface utilisateur avec des classes scellées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Kotlin Academy, passe à CoddyKit PRO. Le cours Kotlin Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modéliser l’état de l’interface utilisateur avec des classes scellées » ?

Utilisez des classes scellées pour représenter les états d’interface Loading, Success et Error. Tu pratiques Kotlin Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Kotlin Academy ?

Aucune expérience préalable n'est requise. Kotlin Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Modéliser l’état de l’interface utilisateur avec des classes scellées » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Kotlin Academy ?

Oui. Chaque leçon Kotlin Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. sealed class ou sealed interface : quand utiliser chacune
  2. when exhaustif avec des hiérarchies scellées
  3. Modéliser l’état de l’interface utilisateur avec des classes scellées
  4. Imbriquer et combiner des hiérarchies scellées
← Retour à Kotlin Academy