Scaffold i Jetpack Compose — vad är det, egenskaper och hur det fungerar

Vad är Scaffold i Jetpack Compose

Scaffold — är en composable-funktion som implementerar skärmramverket enligt Material Design-specifikationen. Scaffold är inte en behållare i vanlig bemärkelse — det är en layoutmanager som samordnar placeringen av flera standard Material-komponenter på skärmen.

Scaffold hanterar avstånd för TopAppBar, BottomBar och FloatingActionButton, samt systemelement — statusfältet och navigeringspanelen. Detta garanterar att innehåll inte överlappar systemelement och följer Material Design-riktlinjerna.

Enligt Material Design Guidelines, 2025 bör Scaffold vara rotelementet för varje applikationsskärm. Det ersätter den föråldrade CoordinatorLayout från View-systemet och ger ett enklare och mer deklarativt API för att bygga skärmlayout.

Grundläggande signatur för Scaffold

Scaffold accepterar parametrarna modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost och content. Parametern content tar emot PaddingValues — de avstånd som huvudinnehållet måste ta hänsyn till.

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

Scaffold-slots: topBar, bottomBar och floatingActionButton

topBar — slot för att placera applikationens övre panel, vanligtvis TopAppBar eller LargeTopAppBar. Scaffold lägger automatiskt till ett avstånd i innerPadding för innehåll så att det inte täcker topBar. TopAppBar kan innehålla en rubrik, navigeringsikon och åtgärder.

bottomBar — slot för den nedre navigeringspanelen. Stödjer BottomNavigation, BottomAppBar eller NavigationBar. Scaffold tar hänsyn till höjden på bottomBar vid beräkning av innerPadding för innehåll. Enligt Material Design Guidelines, 2025 bör bottomBar användas på skärmar med 3–5 navigeringspunkter.

floatingActionButton — slot för den flytande åtgärdsknappen. Scaffold positionerar automatiskt FAB enligt Material Design-specifikationen — i det nedre högra hörnet med korrekt avstånd. floatingActionButtonPosition gör det möjligt att flytta FAB till mitten av skärmens nedre kant.

Exempel med alla slots

I detta exempel använder Scaffold alla huvudsakliga slots: TopAppBar med rubrik, BottomBar med tre navigeringselement och FloatingActionButton för huvudåtgärden.

@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, "Hem") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Sök") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Skärminnehåll")
        }
    }
}

ScaffoldState: hantering av Drawer och Snackbar

ScaffoldState — tillståndsobjektet för Scaffold som kombinerar DrawerState och SnackbarHostState. DrawerState hanterar öppning och stängning av sidomenyn, och SnackbarHostState hanterar visning och döljning av Snackbar. Tillståndet skapas via rememberScaffoldState() och skickas till parametern scaffoldState.

DrawerState tillhandahåller metoderna open och close för programmeringsbar hantering av Drawer. Drawers tillstånd kan vara öppet, stängt eller delvis öppet. drawerGesturesEnabled gör det möjligt att inaktivera gesten att öppna Drawer genom att svepa, och endast behålla programmeringsbar öppning via knapp.

SnackbarHostState hanterar Snackbar — tillfälliga notifieringar längst ner på skärmen. Metoden showSnackbar visar en Snackbar med ett meddelande och valfri åtgärd. Enligt Material Design Guidelines, 2025 bör Snackbar användas för korta meddelanden utan kritisk viktig information.

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

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

Exempel på skärmbyggnad med Scaffold

Ett komplett skärmexempel med Scaffold inkluderar TopAppBar, BottomNavigation, FloatingActionButton och Snackbar för att visa notifieringar när FAB trycks. ScaffoldState skickas till alla komponenter för tillståndskoordinering.

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

InnerPadding och adaptiv layout med Scaffold

innerPadding — är PaddingValues som Scaffold skickar till content-blocket. De innehåller de avstånd som krävs för att innehåll inte ska täcka statusBar, navigationBar, topBar och bottomBar. Användning av innerPadding är obligatorisk för korrekt visning på olika enheter.

Scaffold beräknar automatiskt innerPadding baserat på systemavstånd och höjden på installerade slots. På enheter med kameraö eller skärmutskärning justerar Scaffold avstånden för statusfältet. På äldre enheter med fysiska knappar kan det nedre avståndet vara noll.

Enligt Android Developers, 2024 bör innerPadding tillämpas på rotbehållaren för innehåll via Modifier.padding(innerPadding). Om innehåll använder en rullbar behållare tillämpas innerPadding via Modifier.consumeWindowInsets för korrekt funktion av tangentbord och systemgester.

• Tillämpa innerPadding på rotbehållaren för innehåll via Modifier.padding(innerPadding)
• För rullbara behållare använd Modifier.consumeWindowInsets(innerPadding)
• Lägg inte till extra avstånd för statusfältet — Scaffold gör detta automatiskt
• Vid avsaknad av topBar eller bottomBar kommer motsvarande avstånd i innerPadding att vara noll