Jetpack Compose Academy · Oppitunti

Mukautuvat ja kiinteät ruudukkosolut

Mukauttakaa ruudukot näytön leveyteen.

Oppitunti 3/413 vaihetta

Mukautuvat ja kiinteät ruudukkosolut on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.

Kaksi tapaa määrittää solujen koko

Ruudukon on tiedettävä sarakkeidensa leveys. Compose tarjoaa kaksi strategiaa: Fixed-sarakemäärän ja Adaptive-strategian vähimmäisleveyden.

Fixed-kertaus

Olette jo tutustuneet GridCells.Fixed(n)-ratkaisuun. Se näyttää aina n saraketta, joten solut kasvavat tai pienenevät näytön leveyden mukaan.

columns = GridCells.Fixed(3)

Fixed-strategian ongelma

Puhelimessa kolme saraketta näyttää hyvältä. Tabletissa samat kolme saraketta muuttuvat hankalan leveiksi. Fixed ei mukaudu suurempiin näyttöihin.

Adaptive käyttöön

GridCells.Adaptive(minSize)-ratkaisussa määritätte solun vähimmäisleveyden. Compose sovittaa mukaan mahdollisimman monta saraketta ja venyttää ne sitten täyttämään käytettävissä olevan tilan.

columns = GridCells.Adaptive(minSize = 120.dp)

Miten Adaptive laskee määrän

Compose jakaa käytettävissä olevan leveyden minSize-arvolla päättääkseen sarakkeiden määrän. Leveämmälle näytölle tulee automaattisesti enemmän sarakkeita.

Responsiivisuus oletuksena

Adaptive-ruudukot näyttävät oikeanlaisilta puhelimissa, taittuvissa laitteissa ja tableteissa ilman ylimääräistä koodia. Yksi minSize-arvo käsittelee kaikki näytöt. 📱

minSize-arvon valitseminen

Valitkaa minSize-arvo, joka pitää sisällön luettavana pienimmässä koossa. Liian pieni arvo tekee soluista ahtaita, kun taas liian suuri arvo saa pienet puhelimet näyttämään vain yhden sarakkeen.

GridCells.Adaptive(minSize = 96.dp)

Milloin Fixed on edelleen parempi

Käyttäkää Fixed-strategiaa, kun suunnittelu edellyttää tarkkaa määrää, kuten seitsemän päivän kalenteriviikossa, jonka on aina oltava seitsemän sarakkeen levyinen.

GridCells.Fixed(7)

Yhdistäminen välistyksiin

Molemmat strategiat toimivat järjestelyjen kanssa. Adaptiven minSize mitataan ennen välistyksiä, joten jättäkää tilaa väleille.

LazyVerticalGrid(
    columns = GridCells.Adaptive(120.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }

Myös LazyHorizontalGrid

Samat Fixed- ja Adaptive-solut toimivat myös LazyHorizontalGrid-komponentissa, joka vierii sivusuunnassa ja täyttää rivit ylhäältä alas.

LazyHorizontalGrid(rows = GridCells.Adaptive(80.dp)) { }

Yksinkertainen sääntö

Käyttäkää sisältögallerioissa oletuksena Adaptive-strategiaa, jotta ne skaalautuvat eri laitteille. Varatkaa Fixed-ratkaisu asetteluille, jotka tarvitsevat tarkan ja merkityksellisen sarakemäärän.

Pikatarkistus

Valitkaa responsiivinen vaihtoehto.

Vastaa interaktiivisessa oppitunnissa

Kertaus: solujen koon määrittäminen

Vertailitte Fixed-strategian tarkkaa määrää ja Adaptive-strategian vähimmäisleveyksiä. Adaptive skaalautuu eri laitteille, kun taas Fixed lukitsee tarkoituksellisen sarakemäärä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 ”Mukautuvat ja kiinteät ruudukkosolut” ilmainen?

Kyllä – oppitunnin ”Mukautuvat ja kiinteät ruudukkosolut” 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 ”Mukautuvat ja kiinteät ruudukkosolut”?

Mukauttakaa ruudukot näytön leveyteen. 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 3/4.

Kuinka kauan ”Mukautuvat ja kiinteät ruudukkosolut”-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