Scaffold in Jetpack Compose — was es ist, Eigenschaften und wie es funktioniert

Was ist Scaffold in Jetpack Compose

Scaffold ist eine composable-Funktion, die das Bildschirmgerüst gemäß der Material Design Spezifikation implementiert. Scaffold ist kein Container im herkömmlichen Sinne — es ist ein Layout-Manager, der die Platzierung mehrerer standardmäßiger Material-Komponenten auf dem Bildschirm koordiniert.

Scaffold verwaltet Abstände für TopAppBar, BottomBar und FloatingActionButton sowie für Systemelemente — die Statusleiste und die Navigationsleiste. Dadurch wird sichergestellt, dass sich Inhalte nicht mit Systemelementen überschneiden und die Material Design Richtlinien eingehalten werden.

Laut Material Design Guidelines, 2025 sollte Scaffold das Wurzelelement jedes Anwendungsbildschirms sein. Es ersetzt das veraltete CoordinatorLayout aus dem View-System und bietet eine einfachere, deklarative API zum Erstellen von Bildschirmlayouts.

Grundlegende Scaffold-Signatur

Scaffold akzeptiert die Parameter modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost und content. Der content-Parameter erhält PaddingValues — die Abstände, die der Hauptinhalt berücksichtigen muss.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Startseite") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Hauptinhalt")
        }
    }
}

Scaffold-Slots: topBar, bottomBar und floatingActionButton

topBar ist der Slot zum Platzieren der oberen App-Leiste, normalerweise TopAppBar oder LargeTopAppBar. Scaffold fügt automatisch Abstände zu innerPadding für den Inhalt hinzu, damit er nicht mit topBar überlappt. TopAppBar kann einen Titel, ein Navigationssymbol und Aktionen enthalten.

bottomBar ist der Slot für die untere Navigationsleiste. Es unterstützt BottomNavigation, BottomAppBar oder NavigationBar. Scaffold berücksichtigt die Höhe von bottomBar bei der Berechnung von innerPadding für den Inhalt. Laut Material Design Guidelines, 2025 sollte bottomBar auf Bildschirmen mit 3–5 Navigationspunkten verwendet werden.

floatingActionButton ist der Slot für den schwebenden Aktionsbutton. Scaffold positioniert den FAB automatisch gemäß der Material Design Spezifikation — in der unteren rechten Ecke mit korrektem Abstand. floatingActionButtonPosition ermöglicht es, den FAB in die Mitte des unteren Bildschirmrands zu verschieben.

Beispiel mit allen Slots

In diesem Beispiel verwendet Scaffold alle Haupt-Slots: TopAppBar mit einem Titel, BottomBar mit drei Navigationselementen und FloatingActionButton für die Hauptaktion.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("App") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Startseite") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Suche") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Bildschirminhalt")
        }
    }
}

ScaffoldState: Verwaltung von Drawer und Snackbar

ScaffoldState ist das Zustandsobjekt von Scaffold, das DrawerState und SnackbarHostState kombiniert. DrawerState verwaltet das Öffnen und Schließen des Seitenmenüs, während SnackbarHostState das Anzeigen und Ausblenden des Snackbars verwaltet. Der Zustand wird mit rememberScaffoldState() erstellt und an den Parameter scaffoldState übergeben.

DrawerState bietet open- und close-Methoden zur programmatischen Steuerung des Drawers. Der Drawer-Status kann offen, geschlossen oder teilweise offen sein. drawerGesturesEnabled ermöglicht es, die Wischgeste zum Öffnen des Drawers zu deaktivieren und nur das programmatische Öffnen über einen Button zu erlauben.

SnackbarHostState verwaltet den Snackbar — temporäre Benachrichtigungen am unteren Bildschirmrand. Die Methode showSnackbar zeigt einen Snackbar mit einer Nachricht und einer optionalen Aktion an. Laut Material Design Guidelines, 2025 sollte Snackbar für kurze Nachrichten ohne kritisch wichtige Informationen verwendet werden.

@Composable
fun ScaffoldWithDrawer() {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Menü") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        drawerContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Element 1")
                Text("Element 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Inhalt")
        }
    }
}

Beispiel für den Bildschirmaufbau mit Scaffold

Ein vollständiges Bildschirmbeispiel mit Scaffold umfasst TopAppBar, BottomNavigation, FloatingActionButton und Snackbar zum Anzeigen von Benachrichtigungen beim Drücken des FAB. ScaffoldState wird an alle Komponenten zur Zustandskoordination übergeben.

@Composable
fun MainScreen() {
    val state = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = state,
        topBar = {
            TopAppBar(
                title = { Text("IT Sectr") },
                actions = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Notifications, "Notifications")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(icon = { Icon(Icons.Default.Home, "Startseite") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Einstellungen") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Fertig")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Willkommen")
        }
    }
}

InnerPadding und adaptives Layout mit Scaffold

innerPadding sind die PaddingValues, die Scaffold an den content-Block übergibt. Sie enthalten die Abstände, die erforderlich sind, um zu verhindern, dass sich der Inhalt mit statusBar, navigationBar, topBar und bottomBar überschneidet. Die Verwendung von innerPadding ist für die korrekte Anzeige auf verschiedenen Geräten erforderlich.

Scaffold berechnet innerPadding automatisch basierend auf den Systemabständen und der Höhe der installierten Slots. Auf Geräten mit Kamerainsel oder Bildschirmausschnitt passt Scaffold die Abstände für die Statusleiste an. Auf älteren Geräten mit physischen Tasten kann der untere Abstand fehlen.

Laut Android Developers, 2024 sollte innerPadding über Modifier.padding(innerPadding) auf den Root-Container des Inhalts angewendet werden. Wenn der Inhalt einen scrollbaren Container verwendet, wird innerPadding über Modifier.consumeWindowInsets für die korrekte Funktion von Tastatur und Systemgesten angewendet.

• Wenden Sie innerPadding über Modifier.padding(innerPadding) auf den Root-Container des Inhalts an
• Für scrollbare Container verwenden Sie Modifier.consumeWindowInsets(innerPadding)
• Fügen Sie keine zusätzlichen Abstände für die Statusleiste hinzu — Scaffold erledigt dies automatisch
• Wenn topBar oder bottomBar fehlen, sind die entsprechenden Abstände in innerPadding null