Jetpack Compose Academy · Oppitunti

LazyRow karuselleja varten

Rakentakaa vaakasuunnassa vieritettävä sisältörivi.

Oppitunti 2/413 vaihetta

LazyRow karuselleja varten on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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 sivusuunnassa

Joskus sisällön pitää liukua vasemmalle ja oikealle, kuten elokuvahyllyn. Tällöin käytätte LazyRow-komponenttia, LazyColumnin vaakasuuntaista vastinetta. ↔️

Miksi ei tavallista Row-komponenttia

Tavallinen Row koostaa jokaisen lapsen heti eikä voi vierittyä. LazyRow vierittyy vaakasuunnassa ja rakentaa vain näkyvissä olevat kohteet.

Perusmuotoinen LazyRow

Syötätte LazyRow-komponentille kohteet aivan kuten Columnille, mutta ne asetetaan vierekkäin pinoamisen sijaan.

LazyRow {
    items(movies) { movie ->
        MovieCard(movie)
    }
}

Korttien välistys

Karusellikortit tarvitsevat välejä. Käyttäkää horizontalArrangement-parametria yhdessä spacedBy-funktion kanssa, jotta korttien väli pysyy yhtenäisenä.

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }

Täyte päissä

Lisätkää contentPadding, jotta ensimmäinen kortti näkyy hieman reunasta eikä leikkaudu tiukasti sen kohdalta.

contentPadding = PaddingValues(horizontal = 16.dp)

Korttien koon määrittäminen

Antakaa jokaiselle karusellikohteelle kiinteä width, jotta kortit pysyvät samankokoisina käyttäjän pyyhkäistessä niiden läpi.

MovieCard(movie, Modifier.width(140.dp))

Seuraava kortti pilkistää

Tehkää osa seuraavasta kortista näkyväksi merkiksi siitä, että sisältöä on lisää. Näytön leveyteen nähden hieman pienempi width toimii tähän hyvin.

val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))

Karusellien yläpuoliset headerit

Karuselli sijoittuu yleensä otsikon alle. Koostakaa LazyRow Columnin sisällä ja sijoittakaa sen yläpuolelle Text-header.

Column {
    Text("Trending Now")
    LazyRow { items(movies) { MovieCard(it) } }
}

Sisäkkäisyys LazyColumnissa

Etusivulla on usein useita karuselleja peräkkäin. Sijoittakaa useita LazyRow-rivejä ylemmän tason LazyColumniin Netflix-tyylisen syötteen luomiseksi.

LazyColumn {
    items(shelves) { shelf ->
        Shelf(shelf)
    }
}

Jokainen Row tarvitsee leveyden

LazyColumnin sisällä oleva LazyRow täyttää käytettävissä olevan leveyden automaattisesti. Varmista vain, että vanhempi antaa sille mitattavaksi rajallisen width-arvon.

Milloin LazyRowia käytetään

Käyttäkää LazyRow-komponenttia hyllyille, suodatinlastuille, tarinakuplille ja kaikelle sisällölle, joka kutsuu vaakasuuntaiseen pyyhkäisyyn alaspäin vierittämisen sijaan.

Pikatarkistus

Ajatelkaa vaakasuuntaista vierittämistä.

Vastaa interaktiivisessa oppitunnissa

Kertaus: karusellit

Rakensitte vaakasuuntaisia hyllyjä LazyRow-komponentilla: rinnakkain olevia kohteita, välistyksiä, lopun sisämarginaalin, kiinteän levyisiä kortteja ja komponentin sijoittamisen syötteen sisään. 🎬

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 ”LazyRow karuselleja varten” ilmainen?

Kyllä – oppitunnin ”LazyRow karuselleja varten” 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 ”LazyRow karuselleja varten”?

Rakentakaa vaakasuunnassa vieritettävä sisältörivi. 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 2/4.

Kuinka kauan ”LazyRow karuselleja varten”-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

← Takaisin: Jetpack Compose Academy