Scaffold in Jetpack Compose — wat is het, eigenschappen en hoe het werkt

Wat is Scaffold in Jetpack Compose

Scaffold — is een composable-functie die het schermframework implementeert volgens de Material Design-specificatie. Scaffold is geen container in de gebruikelijke zin — het is een layoutmanager die de plaatsing van meerdere standaard Material-componenten op het scherm coördineert.

Scaffold beheert marges voor TopAppBar, BottomBar en FloatingActionButton, evenals systeemelementen — de statusbalk en het navigatiepaneel. Dit garandeert dat inhoud niet over systeemelementen heen valt en voldoet aan de Material Design-richtlijnen.

Volgens Material Design Guidelines, 2025 moet Scaffold het root-element zijn van elk applicatiescherm. Het vervangt de verouderde CoordinatorLayout uit het View-systeem en biedt een eenvoudigere en meer declaratieve API voor het bouwen van schermlayout.

Basis signatuur van Scaffold

Scaffold accepteert parameters modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost en content. De content-parameter ontvangt PaddingValues — de marges die de hoofdinhoud in acht moet nemen.

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

Scaffold-slots: topBar, bottomBar en floatingActionButton

topBar — slot voor het plaatsen van het bovenste applicatiepaneel, meestal TopAppBar of LargeTopAppBar. Scaffold voegt automatisch een marge toe aan innerPadding voor inhoud, zodat het niet over de topBar heen valt. TopAppBar kan een titel, navigatiepictogram en acties bevatten.

bottomBar — slot voor het onderste navigatiepaneel. Ondersteunt BottomNavigation, BottomAppBar of NavigationBar. Scaffold houdt rekening met de hoogte van bottomBar bij het berekenen van innerPadding voor inhoud. Volgens Material Design Guidelines, 2025 moet bottomBar worden gebruikt op schermen met 3–5 navigatiepunten.

floatingActionButton — slot voor de zwevende actieknop. Scaffold positioneert FAB automatisch volgens de Material Design-specificatie — in de rechteronderhoek met correcte marge. floatingActionButtonPosition maakt het mogelijk FAB naar het midden van de onderrand van het scherm te verplaatsen.

Voorbeeld met alle slots

In dit voorbeeld gebruikt Scaffold alle hoofd-slots: TopAppBar met titel, BottomBar met drie navigatie-elementen en FloatingActionButton voor de hoofdactie.

@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, "Home") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Zoeken") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Scherminhoud")
        }
    }
}

ScaffoldState: beheer van Drawer en Snackbar

ScaffoldState — het statusobject van Scaffold dat DrawerState en SnackbarHostState combineert. DrawerState beheert het openen en sluiten van het zijmenu, en SnackbarHostState het tonen en verbergen van Snackbar. De status wordt aangemaakt via rememberScaffoldState() en doorgegeven aan de scaffoldState-parameter.

DrawerState biedt methoden open en close voor programmatisch beheer van Drawer. De status van Drawer kan open, gesloten of gedeeltelijk open zijn. drawerGesturesEnabled maakt het mogelijk het openen van Drawer via vegen uit te schakelen, met alleen programmatisch openen via een knop.

SnackbarHostState beheert Snackbar — tijdelijke meldingen onderaan het scherm. De methode showSnackbar toont een Snackbar met een bericht en optionele actie. Volgens Material Design Guidelines, 2025 moet Snackbar worden gebruikt voor korte berichten zonder kritiek belangrijke informatie.

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

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

Voorbeeld van schermopbouw met Scaffold

Een volledig schermvoorbeeld met Scaffold omvat TopAppBar, BottomNavigation, FloatingActionButton en Snackbar voor het tonen van meldingen bij indrukken van FAB. ScaffoldState wordt aan alle componenten doorgegeven voor statustoëlichting.

@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, "Home") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Instellingen") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Gereed")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Welkom")
        }
    }
}

InnerPadding en adaptieve layout met Scaffold

innerPadding — zijn PaddingValues die Scaffold doorgeeft aan het content-blok. Ze bevatten de marges die nodig zijn om te voorkomen dat inhoud over statusBar, navigationBar, topBar en bottomBar heen valt. Gebruik van innerPadding is verplicht voor correcte weergave op verschillende apparaten.

Scaffold berekent automatisch innerPadding op basis van systeemmarges en de hoogte van geïnstalleerde slots. Op apparaten met een camera-eiland of uitsparing in het scherm past Scaffold de marges voor de statusbalk aan. Op oudere apparaten met fysieke knoppen kan de onderste marge nul zijn.

Volgens Android Developers, 2024 moet innerPadding worden toegepast op de root-container van inhoud via Modifier.padding(innerPadding). Als inhoud een scrollbare container gebruikt, wordt innerPadding toegepast via Modifier.consumeWindowInsets voor correcte werking van toetsenbord en systeemgebaren.

• Pas innerPadding toe op de root-container van inhoud via Modifier.padding(innerPadding)
• Voor scrollbare containers gebruik Modifier.consumeWindowInsets(innerPadding)
• Voeg geen extra marges toe voor de statusbalk — Scaffold doet dit automatisch
• Bij afwezigheid van topBar of bottomBar zullen de corresponderende marges in innerPadding nul zijn