Gestion de l'état de la liste

Icône de note de trois étoiles

Les listes déroulantes dans Jetpack Compose, telles que LazyColumn et LazyRow, peuvent afficher de grandes quantités de données de manière efficace. Toutefois, les changements de configuration, tels que la rotation de l'appareil ou le pliage/dépliage d'un appareil pliable, peuvent réinitialiser l'état d'une liste, ce qui oblige les utilisateurs à faire défiler l'écran jusqu'à leur position précédente.

Bonnes pratiques

Les listes déroulantes doivent conserver leur état, en particulier leur position de défilement, ainsi que l'état de leurs éléments de liste individuels (comme les saisies de texte) lors de toutes les modifications de configuration pour offrir une expérience utilisateur fluide.

Ingrédients

  • rememberLazyListState() : crée et mémorise un LazyListState qui est utilisé pour contrôler et observer la position de défilement de la liste. Il persiste automatiquement lors des modifications de configuration.
  • rememberSaveable : mémorise la valeur d'état lors des modifications de configuration. Cela est utile pour préserver les états des éléments de liste individuels (comme les entrées de champ de texte).

Étapes

Dans Jetpack Compose, la conservation de la position de défilement d'une liste est gérée automatiquement lorsque vous utilisez un état de défilement. Pour conserver l'état d'éléments de liste complexes individuels (tels que les entrées TextField), utilisez rememberSaveable.

1. Conserver l'état de défilement de la liste

Pour enregistrer et restaurer la position de défilement de votre liste lors des changements de configuration, créez un LazyListState à l'aide de rememberLazyListState() et transmettez-le en tant que paramètre state de votre liste déroulante, comme LazyColumn.

Compose conserve automatiquement la position de défilement pour vous.

2. Conserver l'état des éléments de liste individuels

Si votre liste contient des éléments avec état (par exemple, des éléments avec des champs de texte), l'état de ces éléments individuels peut être perdu lorsqu'ils sont recyclés après avoir défilé hors écran ou lors de modifications de la configuration.

Pour conserver l'état d'un élément individuel, utilisez rememberSaveable dans le champ de l'élément de liste. Cela garantit que lorsque l'élément est recomposé ou que l'utilisateur fait défiler l'écran pour le remettre en vue, son état est restauré.

Voici une implémentation complète et compilable qui illustre la restauration de l'état de défilement et de l'état des éléments :

// Scroll state is automatically saved and restored by rememberLazyListState
val listState = rememberLazyListState()

LazyColumn(state = listState) {
    items(100) { index ->
        // Use rememberSaveable to preserve individual item state (e.g., text input)
        var text by rememberSaveable { mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Item $index") }
        )
    }
}

Résultats

Votre liste déroulante peut désormais restaurer sa position de défilement et l'état de chaque élément de la liste.

Ressources supplémentaires