Scaffold: Das Bildschirmskelett
Richten Sie die Slots des standardmäßigen App-Layouts ein.
Scaffold: Das Bildschirmskelett ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Meet Scaffold
Most app screens share the same skeleton: a bar on top, content in the middle, maybe a button floating below. Scaffold gives you all of that in one Composable. 🏗️
Why Not Just a Column?
You could hand-build bars with a Column, but you would re-solve insets, spacing, and overlaps every time. Scaffold wires those standard pieces together for you.
The Slot Idea
Scaffold works with slots: named spots where you drop a Composable. You fill the slots you want and leave the rest empty.
The content Slot
The one slot you almost always use is content. It is the main body of your screen, and Scaffold hands it the right padding to use.
Scaffold { innerPadding ->
Text("Hello", Modifier.padding(innerPadding))
}Honor innerPadding
That innerPadding keeps your content from hiding under bars. Always apply it to your top-level content, or text can slip beneath the app bar.
The topBar Slot
Drop a bar into the topBar slot and Scaffold pins it to the top, then shrinks the content area so nothing overlaps.
Scaffold(
topBar = { TopAppBar(title = { Text("Home") }) }
) { padding -> }More Slots Available
Scaffold also offers bottomBar, floatingActionButton, and snackbarHost slots. You will meet each one in this course.
Leave Slots Empty
Every slot is optional. A Scaffold with only content is perfectly valid, so you add bars only when a screen actually needs them.
One Scaffold Per Screen
The usual rule is one Scaffold per screen. It frames that whole screen, while smaller Composables fill its content slot.
Scaffold Is Material 3
Import Scaffold from androidx.compose.material3 so its colors and spacing match the rest of your Material You theme.
import androidx.compose.material3.ScaffoldcontainerColor
Set containerColor to paint the screen background behind every slot. Skip it and Scaffold uses your theme's surface color by default.
Quick Check
What is the safest thing to do with the value Scaffold passes to its content lambda?
Recap
Scaffold is your screen skeleton: fill named slots like content and topBar, honor innerPadding, and use one per screen. Next you will style the top bar. 👍
Lerne Kotlin mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „Scaffold: Das Bildschirmskelett“ kostenlos?
Ja — der vollständige Text von „Scaffold: Das Bildschirmskelett“ 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 „Scaffold: Das Bildschirmskelett“?
Richten Sie die Slots des standardmäßigen App-Layouts ein. 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 1 von 4.
Wie lange dauert die Lektion „Scaffold: Das Bildschirmskelett“?
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
- Scaffold: Das Bildschirmskelett
- TopAppBar und Aktions-Icons
- Untere Leisten und Floating Action Buttons
- Snackbars und SnackbarHostState