État de défilement et défilement programmatique
Lisez et contrôlez la position de défilement d’une liste.
État de défilement et défilement programmatique est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Controlling the Scroll
Sometimes you need to read how far a list has scrolled, or jump it somewhere yourself. That is the job of a scroll state. 🎚️
rememberLazyListState
Create and hold a list state with rememberLazyListState, then pass it to your LazyColumn, LazyRow, or grid.
val listState = rememberLazyListState()
LazyColumn(state = listState) { }Grids Have State Too
A grid uses its own holder, rememberLazyGridState. Wire it the same way to track and drive a LazyVerticalGrid.
val gridState = rememberLazyGridState()
LazyVerticalGrid(state = gridState, columns = GridCells.Fixed(2)) { }Reading the First Item
Ask the state for firstVisibleItemIndex to know which item sits at the top of the viewport right now.
val firstIndex = listState.firstVisibleItemIndexDetecting Scroll Direction
The flag isScrollInProgress tells you whether the user is actively scrolling, handy for hiding a toolbar while they move.
if (listState.isScrollInProgress) hideToolbar()Jump Instantly
To snap straight to an item with no animation, call scrollToItem from a coroutine scope.
scope.launch {
listState.scrollToItem(index = 0)
}Scroll Smoothly
For a gentle glide instead of a jump, use animateScrollToItem. It is great for a back-to-top button.
scope.launch {
listState.animateScrollToItem(0)
}Why a Coroutine Scope
Scrolling is a suspend operation, so it must run in a coroutine. Grab a rememberCoroutineScope to launch it from a click.
val scope = rememberCoroutineScope()
Button(onClick = { scope.launch { listState.animateScrollToItem(0) } }) { }Show a Back-to-Top Button
Combine the two ideas: derive a visibility flag from firstVisibleItemIndex, then animate-scroll to zero on tap.
val showFab by remember {
derivedStateOf { listState.firstVisibleItemIndex > 5 }
}Survives Recomposition
Because the state is remembered, the scroll position survives recomposition. Use rememberSaveable variants to keep it across rotation.
State Drives the UI
The pattern is consistent: hold a scroll state, read it to react to position, and call its scroll functions to move the list yourself.
Quick Check
One on smooth scrolling.
Recap: Scroll Control
You learned to hold a scroll state, read firstVisibleItemIndex, and drive lists with scrollToItem and animateScrollToItem from a coroutine. 🚀
Questions Fréquemment Posées
La leçon « État de défilement et défilement programmatique » est-elle gratuite ?
Oui — le texte complet de « État de défilement et défilement programmatique » 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 Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « État de défilement et défilement programmatique » ?
Lisez et contrôlez la position de défilement d’une liste. Tu pratiques Jetpack Compose 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 Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose 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 4 sur 4.
Combien de temps prend la leçon « État de défilement et défilement programmatique » ?
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 Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose 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
- Galeries LazyVerticalGrid
- LazyRow pour les carrousels
- Cellules de grille adaptatives ou fixes
- État de défilement et défilement programmatique