Compose-State-Slots und Content-Lambdas
Machen Sie Komponenten mit Slot-APIs flexibel.
Compose-State-Slots und Content-Lambdas ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Make Components Flexible
A slot lets a component accept a chunk of UI as a parameter. The caller fills the slot, so one component fits many designs.
Meet the content Lambda
The most common slot is a trailing content lambda of type @Composable () -> Unit. Whatever you put in braces becomes the body.
fun Card(content: @Composable () -> Unit) {
Surface { content() }
}Calling a Slot
You call the slot just like a normal lambda. Compose runs whatever UI the caller passed, right where you invoke content().
Card {
Text("Anything I want lives here")
}Why Slots Beat Booleans
Instead of many flags like showIcon or showTitle, expose slots. Callers compose exactly what they need, with full freedom.
Named Slots
Components can offer several slots, each a parameter. Scaffold does this with topBar, bottomBar, and content. 🧩
fun Banner(
title: @Composable () -> Unit,
action: @Composable () -> Unit
) { /* lay them out */ }Scopes Add Power
A slot can be a receiver lambda, giving the caller helpers. Inside a Column, content is ColumnScope.() -> Unit so weight works.
fun MyColumn(content: @Composable ColumnScope.() -> Unit) {
Column { content() }
}Passing Data Into a Slot
Slots can hand values to the caller. A list row slot might pass the item so the caller decides how to draw it.
fun Row(item: User, content: @Composable (User) -> Unit) {
content(item)
}Slots Keep State Hoisted
Because the caller supplies the slot content, your component stays stateless about what is inside it. Ownership stays clear.
Reuse Across Screens
One Card or Dialog with slots replaces a dozen near-identical components. You build the frame once and vary the filling. ♻️
Default Slot Content
Give a slot a sensible default so simple callers can skip it, while advanced callers override it fully.
fun Section(
header: @Composable () -> Unit = { Text("Section") },
content: @Composable () -> Unit
) { /* ... */ }The Slot Mindset
When a component starts collecting boolean flags, reach for slots instead. Flexibility comes from passing UI, not toggles.
Quick Check
What is the main benefit of a content slot lambda?
Recap
Slots accept UI as @Composable lambdas, optionally scoped or passing data. They make components flexible while keeping state hoisted. 🚀
Häufig gestellte Fragen
Ist die Lektion „Compose-State-Slots und Content-Lambdas“ kostenlos?
Ja — der vollständige Text von „Compose-State-Slots und Content-Lambdas“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Compose-State-Slots und Content-Lambdas“?
Machen Sie Komponenten mit Slot-APIs flexibel. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Compose-State-Slots und Content-Lambdas“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Stateful und stateless Composables
- State mit value und onValueChange hoisten
- Single Source of Truth
- Compose-State-Slots und Content-Lambdas