Créer un bouton pour activer le défilement par ancrage

Vous pouvez afficher un bouton permettant à l'utilisateur de faire défiler la liste jusqu'à un point spécifique, ce qui lui fait gagner du temps et augmente son engagement.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Créer un bouton pour activer le défilement par ancrage

Utilisez le code suivant pour créer un bouton permettant un défilement fluide dans une liste paresseuse verticale de 10 éléments:

@Composable
fun MessageList(modifier: Modifier = Modifier) {
    val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    LazyColumn(state = listState, modifier = Modifier.height(120.dp)) {
        items(10) { index ->
            Text(
                modifier = Modifier.height(40.dp),
                text = "Item $index"
            )
        }
    }

    Button(onClick = {
        coroutineScope.launch {
            listState.animateScrollToItem(index = 0)
        }
    }) {
        Text(text = "Go top")
    }
}
LazyListSnippets.kt

Points clés concernant le code

  • Utilise l'objet listState pour mémoriser l'état de défilement de LazyColumn à la position sélectionnée.
  • Lance une coroutine pour appeler listState.animateScrollToItem, qui fait défiler l'élément indexé tout en animant l'action de défilement.

Résultats

Liste à défilement vertical avec un bouton actif
Figure 1. Liste à défilement vertical avec un bouton de défilement par saut.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Les listes et les grilles permettent à votre application d'afficher des collections sous une forme visuellement attrayante et facile à utiliser pour les utilisateurs.
Collection de guides rapides
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Collection de guides rapides
Cette série de vidéos présente différentes API Compose, vous montrant rapidement ce qui est disponible et comment les utiliser.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires