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 efficacement de grandes quantités de données. Toutefois, les modifications de configuration telles que la rotation de l'appareil ou le pliage/dépliage d'un appareil 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 entrées de texte) lors de toutes les modifications de configuration afin d'offrir une expérience utilisateur fluide.

Ingrédients

  • rememberLazyListState() : crée et mémorise un LazyListState qui permet de contrôler et d'observer la position de défilement de la liste. Il est automatiquement conservé lors des modifications de configuration.
  • rememberSaveable: mémorise la valeur d'état lors des modifications de configuration, ce qui est utile pour conserver 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 individuels et complexes (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 modifications de configuration créez un LazyListState à l'aide de rememberLazyListState() et transmettez le en tant que paramètre state de votre liste déroulante, par exemple un LazyColumn.

Compose conserve automatiquement la position de défilement.

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 masqués à l'écran et recyclés, ou lors de modifications de configuration.

Pour conserver l'état des éléments individuels, utilisez rememberSaveable dans le champ de l'élément de liste. Ainsi, lorsque l'élément est recomposé ou que l'utilisateur revient à l'écran, 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