Jetpack Compose Academy · leksjon

Compose-tilstandsplasser og innholdslambdaer

Gjør komponenter fleksible med slot-API-er.

Leksjon 4 av 413 trinn

Compose-tilstandsplasser og innholdslambdaer er en gratis leksjon i Jetpack Compose Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Jetpack Compose Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.

Gjør komponenter fleksible

En slot lar en komponent ta imot en del av brukergrensesnittet som parameter. Kalleren fyller sloten, slik at én komponent passer til mange utforminger.

Møt content-lambdaen

Den vanligste sloten er en avsluttende content-lambda av typen @Composable () -> Unit. Alt De plasserer i klammeparentesene, blir innholdet.

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

Kalle en slot

De kaller sloten akkurat som en vanlig lambda. Compose kjører brukergrensesnittet kalleren sendte inn, akkurat der De påkaller content().

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

Hvorfor slots slår boolske flagg

I stedet for mange flagg som showIcon eller showTitle kan De eksponere slots. Kallerne setter sammen nøyaktig det de trenger, med full frihet.

Navngitte slots

Komponenter kan tilby flere slots, hver som en parameter. Scaffold gjør dette med topBar, bottomBar og content. 🧩

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

Scope gir ekstra kraft

En slot kan være en receiver-lambda som gir kalleren hjelpefunksjoner. Inne i en Column er content ColumnScope.() -> Unit, slik at weight fungerer.

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

Sende data inn i en slot

Slots kan sende verdier til kalleren. En slot for en listerad kan for eksempel sende elementet, slik at kalleren bestemmer hvordan det skal tegnes.

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

Slots holder state hoistet

Fordi kalleren leverer slot-innholdet, er komponenten ikke stateful med hensyn til det som befinner seg inni den. Eierskapet forblir tydelig.

Gjenbruk på tvers av skjermer

Én Card eller Dialog med slots kan erstatte et dusin nesten identiske komponenter. De bygger rammen én gang og varierer innholdet. ♻️

Standardinnhold i slots

Gi en slot et fornuftig standardinnhold, slik at enkle kallere kan utelate den, mens avanserte kallere kan overstyre den fullstendig.

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

Slot-tankegangen

Når en komponent begynner å samle boolske flagg, bør De heller bruke slots. Fleksibilitet kommer av å sende inn brukergrensesnitt, ikke av brytere.

Rask kontroll

Hva er den viktigste fordelen med en content-slot-lambda?

Oppsummering

Slots tar imot brukergrensesnitt som @Composable-lambdaer, eventuelt med scope eller data. De gjør komponenter fleksible samtidig som state forblir hoistet. 🚀

Gratis å komme i gang

Lær deg Kotlin med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
30
Leksjoner
120

Ofte stilte spørsmål

Er leksjonen «Compose-tilstandsplasser og innholdslambdaer» gratis?

Ja – hele teksten i «Compose-tilstandsplasser og innholdslambdaer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Jetpack Compose Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Compose-tilstandsplasser og innholdslambdaer»?

Gjør komponenter fleksible med slot-API-er. Du øver på Jetpack Compose Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Jetpack Compose Academy?

Ingen tidligere erfaring er nødvendig. Jetpack Compose Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Compose-tilstandsplasser og innholdslambdaer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Jetpack Compose Academy-leksjonen?

Ja. Alle Jetpack Compose Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Stateful kontra stateless Composable-er
  2. Heise tilstand med value og onValueChange
  3. Én sannhetskilde
  4. Compose-tilstandsplasser og innholdslambdaer
← Tilbake til Jetpack Compose Academy