Połączenia zagnieżdżonego przewijania
Koordynuj przewijanie między kontenerami
Połączenia zagnieżdżonego przewijania 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.
Przewijanie wewnątrz przewijania
Czasami jeden przewijalny element znajduje się wewnątrz drugiego, na przykład lista pod zwijanym nagłówkiem. Nested scroll pozwala im współpracować zamiast ze sobą konkurować. 📜
Problem koordynacji
Bez dodatkowej pomocy wewnętrzna lista przechwytuje każde przesunięcie, a zewnętrzny kontener nigdy się nie porusza. NestedScrollConnection rozdziela przewijanie między nimi.
Poznaj nestedScroll
Dodaj modyfikator nestedScroll i przekaż mu połączenie. Połączenie przechwytuje zmiany przewijania, gdy przemieszczają się w górę drzewa.
Modifier.nestedScroll(connection)Pre-scroll: pierwszy dostęp
Element nadrzędny otrzymuje szansę przed podrzędnym za pośrednictwem onPreScroll. Zwróć, jaką część zmiany zużyłeś(-aś); reszta zostanie przekazana elementowi podrzędnemu.
override fun onPreScroll(available: Offset, source): OffsetPost-scroll: pozostałości
Po przewinięciu elementu podrzędnego funkcja onPostScroll przekazuje elementowi nadrzędnemu niewykorzystaną zmianę. Użyj jej, aby przesunąć nagłówek, gdy lista dotrze do krawędzi.
override fun onPostScroll(consumed, available, source): OffsetZużywanie potrzebnej części
W każdym wywołaniu zwrotnym zwracasz wartość Offset określającą, jaką część wykorzystałeś(-aś). Zwróć Offset.Zero, aby przekazać wszystko dalej do następnego uczestnika.
return Offset(0f, consumedY)Fazy podrzucenia również
Istnieją odpowiadające im wywołania zwrotne onPreFling i onPostFling, służące do obsługi pędu. Są to funkcje zawieszane, więc można animować element podczas wyhamowywania podrzucenia.
override suspend fun onPreFling(available: Velocity): VelocityZapamiętywanie połączenia
Owiń połączenie w remember, aby przetrwało rekompozycję. Umieść w nim każdy odczytywany stan, taki jak przesunięcie nagłówka.
val connection = remember { object : NestedScrollConnection {...} }Klasyczny zwijany pasek narzędzi
Najbardziej typowym zastosowaniem jest collapsing toolbar: zmniejszaj górny pasek za pomocą pre-scroll, gdy lista się przewija, a następnie rozwijaj go podczas przewijania w drugą stronę.
Często działa od razu
Wiele wbudowanych elementów, takich jak Scaffold z zachowaniami przewijania, już konfiguruje nested scroll za Ciebie. Sięgaj po niestandardowe połączenie tylko wtedy, gdy potrzebujesz precyzyjnej kontroli.
Zwracaj uwagę na źródło
Każde wywołanie zwrotne otrzymuje wartość source, która informuje, czy przewijanie pochodziło z przeciągnięcia, czy z podrzucenia. Użyj jej, aby różnie reagować na dotyk i pęd.
if (source == NestedScrollSource.Drag) { /* ... */ }Szybkie sprawdzenie
Które wywołanie zwrotne pozwala elementowi nadrzędnemu zużyć przewijanie, zanim zrobi to element podrzędny?
Podsumowanie: przewijanie w harmonii
Poznałeś(-aś) NestedScrollConnection z pre- i post-scroll oraz obsługą podrzucenia — to klucz do zwijanych pasków narzędzi i współpracujących list. 🎉
Ucz się Kotlin dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Połączenia zagnieżdżonego przewijania” jest bezpłatna?
Tak — pełny tekst „Połączenia zagnieżdżonego przewijania” 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 „Połączenia zagnieżdżonego przewijania”?
Koordynuj przewijanie między kontenerami Ć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 „Połączenia zagnieżdżonego przewijania”?
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
- pointerInput i detectTapGestures
- Przeciąganie, przesuwanie i podrzucanie
- Transform: przesuwanie, powiększanie i obracanie
- Połączenia zagnieżdżonego przewijania