Przeciąganie, przesuwanie i podrzucanie
Śledź ruch i pęd
Przeciąganie, przesuwanie i podrzucanie to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 2 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.
Podążanie za palcem
Przeciąganie oznacza śledzenie odległości, na jaką przesuwa się palec, i odpowiednie aktualizowanie interfejsu. Compose ułatwia to za pomocą dedykowanych detektorów drag. ✋
Wykrywanie gestów przeciągania
Wewnątrz pointerInput wywołaj detectDragGestures. Jego lambda onDrag jest wywoływana wielokrotnie i otrzymuje zmianę oraz odległość przebytą od poprzedniego zdarzenia.
detectDragGestures { change, drag -> /* move */ }Sumowanie przesunięcia
Przechowuj stan Offset i dodawaj do niego każdą zmianę przesunięcia. Następnie przekaż ten offset do Modifier, aby element podążał za palcem.
var offset by remember { mutableStateOf(Offset.Zero) }
offset += dragZastosowanie modyfikatora offset
Użyj modyfikatora offset, aby przesunąć composable o śledzoną liczbę pikseli. Użyj roundToInt, aby element był precyzyjnie pozycjonowany na ekranie.
Modifier.offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }Obsługa zmiany
Wywołaj change.consume() w handlerze przeciągania. Informuje to elementy nadrzędne, że obsłużyłeś(-aś) zdarzenie, więc nie powinny reagować na nie ponownie.
detectDragGestures { change, drag -> change.consume() }Ograniczenie do jednej osi
Potrzebujesz tylko ruchu na boki? Użyj detectHorizontalDragGestures albo detectVerticalDragGestures dla ruchu w górę i w dół. Zwracają one pojedynczą wartość Float określającą zmianę.
detectHorizontalDragGestures { _, dx -> x += dx }Przesunięcie w celu zamknięcia
swipe to po prostu przeciągnięcie oceniane na końcu. Jeśli palec przemieścił się wystarczająco daleko, potraktuj gest jako zamknięcie zamiast przywracać element na miejsce.
Wysokopoziomowy draggable
W przypadku prostego przeciągania wzdłuż jednej osi łatwiejszy jest modyfikator draggable. Połącz go z rememberDraggableState, aby zbierać zmianę przesunięcia.
Modifier.draggable(state, orientation = Orientation.Horizontal)Podrzucenie wymaga prędkości
fling to ruch trwający po zwolnieniu palca, zależny od prędkości. Śledź prędkość za pomocą VelocityTracker podczas ruchu palca, aby przechwycić ten pęd.
val tracker = VelocityTracker()Animowanie wyhamowania
Przekaż prędkość z momentu zwolnienia do obiektu Animatable wraz ze specyfikacją wyhamowania. Element płynnie zatrzyma się w naturalny sposób, naśladując prawdziwą fizykę. 🌀
animatable.animateDecay(velocity, exponentialDecay())Wykrywanie końca
detectDragGestures udostępnia również onDragEnd i onDragCancel. Użyj ich, aby przywrócić element, ustabilizować jego położenie lub uruchomić animację podrzucenia.
detectDragGestures(onDragEnd = { /* fling here */ }) {...}Szybkie sprawdzenie
Czego potrzebuje animacja podrzucenia, czego nie potrzebuje zwykłe przeciąganie?
Podsumowanie: ruch z pędem
Śledziłeś(-aś) przeciągnięcia za pomocą detectDragGestures, sumowałeś(-aś) przesunięcie, oceniałeś(-aś) gesty przesunięcia i używałeś(-aś) prędkości do podrzucenia. Dotyk ożył. 🎉
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 „Przeciąganie, przesuwanie i podrzucanie” jest bezpłatna?
Tak — pełny tekst „Przeciąganie, przesuwanie i podrzucanie” 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 „Przeciąganie, przesuwanie i podrzucanie”?
Śledź ruch i pęd Ć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 2 z 4.
Ile czasu zajmuje lekcja „Przeciąganie, przesuwanie i podrzucanie”?
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