Jetpack Compose Academy · Oppitunti

Layout-Composablen kirjoittaminen

Mitatkaa lapsielementit ja sijoittakaa ne käsin.

Oppitunti 2/413 vaihetta

Layout-Composablen kirjoittaminen 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.

Tutustu Layout Composableen

Kun haluat rakentaa oman asettelusi, käytät Layout-composablea. Se antaa käyttöösi suoraan mittauksen ja sijoittamisen perusvoiman. 🛠️

Layout saa sisällön ja lambdan

Layout hyväksyy lapsen content-sisällön sekä mittauslambdan. Lambda saa käsiteltäväkseen measurables-oliot ja käytettävissä olevat rajoitteet.

Layout(content = content,
  modifier = modifier) { measurables, constraints ->
  // measure and place
}

Vaihe yksi: mittaa lapset

Lambda-funktion sisällä käyt measurables-oliot läpi ja mittaat jokaisen. Saat takaisin luettelon placeables-olioita, joiden koot tunnetaan.

val placeables = measurables.map { it.measure(constraints) }

Vaihe kaksi: päätä oma kokosi

Laske nyt, kuinka suuri asettelusi pitäisi olla. Pystysuuntaisessa pinossa korkeus on lasten korkeuksien summa ja leveys on leveimmän lapsen leveys.

val height = placeables.sumOf { it.height }
val width = placeables.maxOf { it.width }

Vaihe kolme: ilmoita koko layout()-funktiolla

Kutsu layout(width, height) ilmoittaaksesi kokosi. Lopussa oleva lambda on paikka, jossa sijoitat jokaisen lapsen.

layout(width, height) {
  // placement goes here
}

Vaihe neljä: sijoita jokainen lapsi

Pidä kirjaa kasvavasta y-siirtymästä ja sijoita jokainen placeable edellisen alapuolelle. Lisää sen korkeus siirtymään jokaisen placeRelative-kutsun jälkeen.

var y = 0
placeables.forEach {
  it.placeRelative(0, y)
  y += it.height
}

Rakensit Columnin uudelleen

Lasten pinoaminen ylhäältä alas on täsmälleen sitä, mitä Column tekee. Olet nyt kirjoittanut alusta asti asettelun, joka toimii aivan samalla tavalla. 🎉

Paketoi se uudelleenkäytettäväksi funktioksi

Sijoita Layout-kutsu @Composable-funktion sisään, jotta muut voivat käyttää sitä kuten mitä tahansa valmista asettelua. Tarjoa modifier ja sisältöpaikka.

@Composable
fun MyColumn(modifier: Modifier = Modifier,
  content: @Composable () -> Unit) { }

Välitä Modifier eteenpäin

Välitä vastaanotettu modifier Layout-kutsulle. Näin kutsuja voi lisätä täytettä, koon ja taustan aivan kuten oikeissa asetteluissa.

Anna Modifier-parametrille oletusarvo

Anna modifier-parametrin oletusarvoksi Modifier. Kutsujat, jotka eivät tarvitse ylimääräistä tyylittelyä, voivat jättää sen pois, joten ohjelmointirajapintasi pysyy selkeänä ja helppokäyttöisenä.

Voit nyt mukauttaa mitä tahansa

Muuta sijoituslaskentaa, niin saat diagonaalisia pinoja, keskitettyjä rivejä tai ruudukoita. Layout-composable on tyhjä pohjasi asettelujen luomiseen.

Pikatarkistus

Mikä metodi sijoittaa mitatun lapsen näytölle?

Vastaa interaktiivisessa oppitunnissa

Kertaus: Layout Composablen kirjoittaminen

Layoutin sisällä mittaat lapset placeable-olioiksi, kutsut layout()-funktiota asettaaksesi oman kokosi ja kutsut sitten placeRelative-metodia jokaiselle lapselle. Paketoi tämä funktioksi uudelleenkäyttöä varten. ✅

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 ”Layout-Composablen kirjoittaminen” ilmainen?

Kyllä – oppitunnin ”Layout-Composablen kirjoittaminen” 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 ”Layout-Composablen kirjoittaminen”?

Mitatkaa lapsielementit ja sijoittakaa ne käsin. 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 ”Layout-Composablen kirjoittaminen”-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