Jetpack Compose Academy · Oppitunti

Compose-tilapaikat ja sisältölambdat

Tehkää komponenteista joustavia slot-rajapinnoilla.

Oppitunti 4/413 vaihetta

Compose-tilapaikat ja sisältölambdat 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.

Tehkää komponenteista joustavia

Slotin avulla komponentti voi vastaanottaa käyttöliittymän osan parametrina. Kutsuja täyttää slotin, joten sama komponentti sopii moniin ulkoasuihin.

Tutustukaa content Lambdaan

Yleisin slot on perässä annettava content-lambda, jonka tyyppi on @Composable () -> Unit. Aaltosulkeisiin kirjoittamanne sisältö muodostaa rungon.

fun Card(content: @Composable () -> Unit) {
  Surface { content() }
}

Slotin kutsuminen

Kutsutte slottia aivan kuten tavallista lambdaa. Compose suorittaa kutsujan välittämän käyttöliittymän juuri siinä kohdassa, jossa kutsutte content()-funktiota.

Card {
  Text("Anything I want lives here")
}

Miksi slotit ovat parempia kuin Boolean-arvot

Sen sijaan että käyttäisitte monia lippuja, kuten showIcon tai showTitle, tuokaa esiin slotit. Kutsujat voivat koostaa juuri tarvitsemansa käyttöliittymän täysin vapaasti.

Nimetyt slotit

Komponenteilla voi olla useita slotteja, joista jokainen on parametri. Scaffold tekee näin topBarin, bottomBarin ja contentin avulla. 🧩

fun Banner(
  title: @Composable () -> Unit,
  action: @Composable () -> Unit
) { /* lay them out */ }

Scopet tuovat lisää tehoa

Slot voi olla receiver-lambda, joka antaa kutsujalle käyttöön apufunktioita. Columnin sisällä content on ColumnScope.() -> Unit, joten weight toimii.

fun MyColumn(content: @Composable ColumnScope.() -> Unit) {
  Column { content() }
}

Datan välittäminen slottiin

Slotit voivat välittää arvoja kutsujalle. Listan rivislot voi esimerkiksi välittää kohteen, jolloin kutsuja päättää, miten se piirretään.

fun Row(item: User, content: @Composable (User) -> Unit) {
  content(item)
}

Slotit pitävät tilan nostettuna

Koska kutsuja toimittaa slotin sisällön, komponenttisi pysyy tilattomana sen sisällön osalta. Omistajuus pysyy selvänä.

Uudelleenkäyttö eri näytöillä

Yksi sloteilla varustettu Card tai Dialog korvaa tusinan lähes identtisiä komponentteja. Rakennatte kehyksen kerran ja vaihdatte sen sisältöä. ♻️

Slotin oletussisältö

Antakaa slotille järkevä oletus, jotta yksinkertaiset kutsujat voivat jättää sen pois ja edistyneet kutsujat korvata sen kokonaan.

fun Section(
  header: @Composable () -> Unit = { Text("Section") },
  content: @Composable () -> Unit
) { /* ... */ }

Slot-ajattelutapa

Kun komponenttiin alkaa kertyä Boolean-lippuja, ottakaa niiden sijaan käyttöön slotit. Joustavuus syntyy käyttöliittymän välittämisestä, ei vaihtokytkimistä.

Pikatarkistus

Mikä on content-slot-lambdan tärkein hyöty?

Kertaus

Slotit vastaanottavat käyttöliittymän @Composable-lambda-funktioina, jotka voivat tarvittaessa käyttää scopea tai välittää dataa. Ne tekevät komponenteista joustavia ja pitävät tilan nostettuna. 🚀

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

Usein kysytyt kysymykset

Onko oppitunti ”Compose-tilapaikat ja sisältölambdat” ilmainen?

Kyllä – oppitunnin ”Compose-tilapaikat ja sisältölambdat” 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 ”Compose-tilapaikat ja sisältölambdat”?

Tehkää komponenteista joustavia slot-rajapinnoilla. 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 ”Compose-tilapaikat ja sisältölambdat”-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

  1. Tilalliset ja tilattomat Composable-funktiot
  2. Tilan nostaminen value- ja onValueChange-parametreilla
  3. Yksi totuuden lähde
  4. Compose-tilapaikat ja sisältölambdat
← Takaisin: Jetpack Compose Academy