Stan przewijania i przewijanie programowe
Odczytuj i kontroluj pozycję przewijania listy
Stan przewijania i przewijanie programowe to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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. 🚀
Często zadawane pytania
Czy lekcja „Stan przewijania i przewijanie programowe” jest bezpłatna?
Tak — pełny tekst „Stan przewijania i przewijanie programowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Stan przewijania i przewijanie programowe”?
Odczytuj i kontroluj pozycję przewijania listy Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?
Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Stan przewijania i przewijanie programowe”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?
Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Galerie LazyVerticalGrid
- LazyRow dla karuzel
- Adaptacyjne a stałe komórki siatki
- Stan przewijania i przewijanie programowe