Jetpack Compose Academy · Oppitunti

Sisäkkäiset vieritysyhteydet

Koordinoikaa säilöjen välistä vieritystä.

Oppitunti 4/413 vaihetta

Sisäkkäiset vieritysyhteydet on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Jetpack Compose Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.

Vieritys vierityksen sisällä

Joskus vieritettävä elementti on toisen vieritettävän elementin sisällä, kuten lista kutistuvan otsikon alla. Nested scroll antaa niiden toimia yhdessä taistelemisen sijaan. 📜

Koordinointiongelma

Ilman apua sisempi lista käsittelee jokaisen pyyhkäisyn, eikä ulompi säilö liiku koskaan. NestedScrollConnection jakaa vierityksen niiden kesken.

Tutustukaa nestedScrolliin

Liittäkää nestedScroll-modifioija ja välittäkää sille yhteys. Yhteys sieppaa vierityssiirtymät niiden kulkiessa puussa ylöspäin.

Modifier.nestedScroll(connection)

Esivieritys: etuoikeus ensin

Vanhempi saa mahdollisuuden toimia ennen lasta onPreScroll-funktion kautta. Palauttakaa, kuinka suuren osan siirtymästä kulutitte; loppuosa jatkaa lapselle.

override fun onPreScroll(available: Offset, source): Offset

Jälkivieritys: jäljelle jäänyt osa

Lapsen vieritettyä onPostScroll tarjoaa käyttämättömän siirtymän takaisin vanhemmalle. Käyttäkää sitä otsikon liikuttamiseen, kun lista saavuttaa reunansa.

override fun onPostScroll(consumed, available, source): Offset

Kuluttakaa tarvitsemanne osa

Palauttakaa jokaisessa callback-funktiossa Offset-arvo, joka kertoo käyttämänne määrän. Palauttakaa Offset.Zero, jos haluatte välittää kaiken seuraavalle osallistujalle.

return Offset(0f, consumedY)

Myös fling-vaiheet

Liike-energiaa varten on vastaavat onPreFling- ja onPostFling-callback-funktiot. Ne ovat suspend-funktioita, joten voitte animoida fling-liikkeen vaimentuessa.

override suspend fun onPreFling(available: Velocity): Velocity

Muistakaa yhteys

Ympäröikää yhteys remember-funktiolla, jotta se säilyy uudelleenkoostamisen yli. Kaapatkaa sen lukema tila, kuten otsikon siirtymä, yhteyden sisällä.

val connection = remember { object : NestedScrollConnection {...} }

Perinteinen kutistuva työkalupalkki

Tyypillinen käyttötapaus on collapsing toolbar: kutistakaa yläpalkkia esivierityksen aikana listan vieriessä ja laajentakaa sitä palattaessa ylöspäin.

Usein kaikki toimii itsestään

Monet valmiit komponentit, kuten vieritystoimintoja tukeva Scaffold, määrittävät nested scroll -toiminnan jo puolestanne. Käyttäkää mukautettua yhteyttä vain, kun tarvitsette tarkkaa hallintaa.

Huomioikaa lähde

Jokainen callback saa source-arvon, joka kertoo, johtuiko vieritys vedosta vai fling-eleestä. Sen avulla voitte reagoida kosketukseen ja liike-energiaan eri tavoin.

if (source == NestedScrollSource.Drag) { /* ... */ }

Pikatarkistus

Mikä callback antaa vanhemman kuluttaa vierityksen ennen lasta?

Vastaa interaktiivisessa oppitunnissa

Kertaus: vieritys harmoniassa

Opitte käyttämään NestedScrollConnection-yhteyttä esija jälkivierityksen sekä fling-vaiheiden kanssa. Se on avain kutistuviin työkalupalkkeihin ja yhteistyötä tekeviin listoihin. 🎉

Aloita maksutta

Opi Kotlin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Sisäkkäiset vieritysyhteydet” ilmainen?

Kyllä – oppitunnin ”Sisäkkäiset vieritysyhteydet” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Jetpack Compose Academy-kurssin, päivitä CoddyKit PROhon. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Sisäkkäiset vieritysyhteydet”?

Koordinoikaa säilöjen välistä vieritystä. Harjoittelet Jetpack Compose Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Jetpack Compose Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Jetpack Compose Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Sisäkkäiset vieritysyhteydet”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Jetpack Compose Academy-oppitunnilla?

Kyllä. Jokainen Jetpack Compose Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

pointerInput ja detectTapGestures
Vetäminen, pyyhkäisy ja heilahdus
Transform: panorointi, zoomaus ja kierto
Sisäkkäiset vieritysyhteydet

← Takaisin: Jetpack Compose Academy