Compose-stateplatser och innehållslambdor
Gör komponenter flexibla med slot-API:er.
Compose-stateplatser och innehållslambdor är en gratis lektion i Jetpack Compose Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Jetpack Compose Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.
Gör komponenter flexibla
En slot låter en komponent ta emot ett stycke UI som parameter. Anroparen fyller slotten, så en komponent kan passa många designer.
Möt content-lambdan
Den vanligaste slotten är en avslutande content-lambda av typen @Composable () -> Unit. Allt du placerar inom klamrarna blir innehållet.
fun Card(content: @Composable () -> Unit) {
Surface { content() }
}Anropa en slot
Du anropar slotten precis som en vanlig lambda. Compose kör det UI som anroparen skickade in, exakt där du anropar content().
Card {
Text("Anything I want lives here")
}Varför slots slår booleans
I stället för många flaggor som showIcon eller showTitle kan du exponera slots. Anroparna sätter samman exakt det de behöver, med full frihet.
Namngivna slots
Komponenter kan erbjuda flera slots, där varje slot är en parameter. Scaffold gör detta med topBar, bottomBar och content. 🧩
fun Banner(
title: @Composable () -> Unit,
action: @Composable () -> Unit
) { /* lay them out */ }Scopes ger extra kraft
En slot kan vara en receiver-lambda som ger anroparen hjälpfunktioner. Inuti en Column är content ColumnScope.() -> Unit, så weight fungerar.
fun MyColumn(content: @Composable ColumnScope.() -> Unit) {
Column { content() }
}Skicka data till en slot
Slots kan lämna över värden till anroparen. En slot för en rad i en lista kan till exempel skicka med objektet, så att anroparen avgör hur det ska ritas upp.
fun Row(item: User, content: @Composable (User) -> Unit) {
content(item)
}Slots håller state hoistat
Eftersom anroparen tillhandahåller slot-innehållet förblir komponenten stateless när det gäller det som finns inuti den. Ägarskapet förblir tydligt.
Återanvändning mellan skärmar
Ett enda Card- eller Dialog-objekt med slots ersätter ett dussin nästan identiska komponenter. Du bygger ramen en gång och varierar innehållet. ♻️
Standardinnehåll i en slot
Ge en slot ett rimligt standardvärde så att enkla anropare kan utelämna den, medan avancerade anropare kan ersätta den helt.
fun Section(
header: @Composable () -> Unit = { Text("Section") },
content: @Composable () -> Unit
) { /* ... */ }Slot-tänket
När en komponent börjar samla på boolean-flaggor ska du i stället välja slots. Flexibilitet kommer från att skicka UI, inte från växlar.
Snabb kontroll
Vilken är den största fördelen med en content-slot-lambda?
Sammanfattning
Slots tar emot UI som @Composable-lambdas, som valfritt kan vara scope-bundna eller skicka data. De gör komponenter flexibla samtidigt som state förblir hoistat. 🚀
Lär dig Kotlin med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Compose-stateplatser och innehållslambdor” gratis?
Ja – hela texten till ”Compose-stateplatser och innehållslambdor” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Jetpack Compose Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Compose-stateplatser och innehållslambdor”?
Gör komponenter flexibla med slot-API:er. Ni övar på Jetpack Compose Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Jetpack Compose Academy?
Du behöver inga förkunskaper. Utbildningen i Jetpack Compose Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Compose-stateplatser och innehållslambdor”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Jetpack Compose Academy-lektionen?
Ja. Varje Jetpack Compose Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Stateful och stateless Composables
- Lyft state med value och onValueChange
- En enda källa till sanning
- Compose-stateplatser och innehållslambdor