Træk, swipe og fling
Følg bevægelse og momentum.
Træk, swipe og fling er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Følg fingeren
At trække betyder at følge, hvor langt en finger bevæger sig, og opdatere brugerfladen tilsvarende. Compose gør det flydende med dedikerede drag-registreringer. ✋
Registrér trækbevægelser
Inde i pointerInput skal du kalde detectDragGestures. Dens onDrag-lambda udløses gentagne gange med ændringen og den afstand, der er bevæget siden den seneste begivenhed.
detectDragGestures { change, drag -> /* move */ }Akkumulér forskydningen
Gem en Offset i en tilstand, og læg hver ændring fra trækket til den. Giv derefter denne forskydning til en Modifier, så elementet følger fingeren.
var offset by remember { mutableStateOf(Offset.Zero) }
offset += dragAnvend med offset-modifieren
Brug offset-modifieren til at flytte en composable med de pixels, du sporer. Konvertér med roundToInt, så den placeres skarpt på skærmen.
Modifier.offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }Forbrug ændringen
Kald change.consume() i din trækbehandler. Det fortæller forældreelementer, at du har håndteret begivenheden, så de ikke også reagerer på den.
detectDragGestures { change, drag -> change.consume() }Begræns til én akse
Har du kun brug for bevægelse fra side til side? Brug detectHorizontalDragGestures eller detectVerticalDragGestures til bevægelse op og ned. De rapporterer én enkelt Float-ændring.
detectHorizontalDragGestures { _, dx -> x += dx }Stryg for at lukke
Et swipe er blot et træk, som du vurderer til sidst. Hvis fingeren er flyttet langt nok, skal du behandle det som en lukning i stedet for at springe tilbage.
Den overordnede draggable
Til enkel trækbevægelse langs én akse er draggable-modifieren nemmere. Kombinér den med rememberDraggableState for at samle ændringen.
Modifier.draggable(state, orientation = Orientation.Horizontal)Fling kræver hastighed
Et fling fortsætter med at bevæge sig efter slip baseret på hastigheden. Spor hastigheden med en VelocityTracker, mens fingeren bevæger sig, for at indfange bevægelsesmængden.
val tracker = VelocityTracker()Animér afmatningen
Giv sliphastigheden til en Animatable med en decay-specifikation. Den glider til et naturligt stop og efterligner fysikkens love. 🌀
animatable.animateDecay(velocity, exponentialDecay())Find slutningen
detectDragGestures giver dig også onDragEnd og onDragCancel. Brug dem til at springe tilbage, falde til ro eller starte din fling-animation.
detectDragGestures(onDragEnd = { /* fling here */ }) {...}Hurtigt tjek
Hvad skal en fling-animation bruge, som et almindeligt træk ikke skal bruge?
Opsummering: Bevægelse med fart
Du sporede træk med detectDragGestures, akkumulerede en forskydning, vurderede strygebevægelser og brugte hastighed til et fling. Berøring føles nu levende. 🎉
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Træk, swipe og fling” gratis?
Ja — hele teksten til “Træk, swipe og fling” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Træk, swipe og fling”?
Følg bevægelse og momentum. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Træk, swipe og fling”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- pointerInput og detectTapGestures
- Træk, swipe og fling
- Transform: Panorering, zoom og rotation
- Nested Scroll-forbindelser