Scaffold у Jetpack Compose — шта је, својства и како ради

Шта је Scaffold у Jetpack Compose

Scaffold — је composable функција која имплементира оквир екрана према спецификацији Material Design. Scaffold није контејнер у уобичајеном смислу — то је менацер распореда који координише положај више стандардних Material компонената на екрану.

Scaffold управља размакима за TopAppBar, BottomBar и FloatingActionButton, као и системским елементима — статусном трком и навигационим панелом. То гарантује да се садржај не преклапа преко системских елемената и да је у складу са смерницама Material Design.

Према Material Design Guidelines, 2025, Scaffold би требало да буде корени елеменат сваког екрана апликације. Он замењује застарели CoordinatorLayout из View система и пружа једноставнији и декларативнији API за изградњу распореда екрана.

Основни потпис Scaffold

Scaffold прихвата параметре modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost и content. Параметар content добија PaddingValues — размаке које главни садржај мора да узме у обзир.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Почетна") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Главни садржај")
        }
    }
}

Слотови Scaffold: topBar, bottomBar и floatingActionButton

topBar — слот за постављање горњег панела апликације, обично TopAppBar или LargeTopAppBar. Scaffold аутоматски додаје размак у innerPadding за садржај да се не преклапа преко topBar. TopAppBar може да садржи наслов, навигациону икону и акције.

bottomBar — слот за доњи навигациони панел. Подржава BottomNavigation, BottomAppBar или NavigationBar. Scaffold узима у обзир висину bottomBar при израчунавању innerPadding за садржај. Према Material Design Guidelines, 2025, bottomBar треба да се користи на екранима са 3–5 навигационих тачака.

floatingActionButton — слот за плутајући дугме акције. Scaffold аутоматски позиционира FAB према спецификацији Material Design — у доњем десном углу са правилним размаком. floatingActionButtonPosition омогућава померање FAB у центар доње ивице екрана.

Примјер са свим слотовима

У овом примјеруурим Scaffold користи све главне слотове: TopAppBar са насловом, BottomBar са три навигациона елемента и FloatingActionButton за главну акцију.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Апликација") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Почетна") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Претрага") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Садржај екрана")
        }
    }
}

ScaffoldState: управљање Drawer и Snackbar

ScaffoldState — објекат стања Scaffold који спаја DrawerState и SnackbarHostState. DrawerState управља отварањем и затварањем бочног менија, а SnackbarHostState приказивањем и сакривањем Snackbar. Стање се креира путем rememberScaffoldState() и прослеђује параметру scaffoldState.

DrawerState пружа методе open и close за програмско управљање Drawer. Стање Drawer може бити отворено, затворено или делимично отворено. drawerGesturesEnabled омогућава искључивање покрета за отварање Drawer превлачењем, остављајући само програмско отварање путем дугмета.

SnackbarHostState управља Snackbar — привременим обавештењима у доњем делу екрана. Метода showSnackbar приказује Snackbar са поруком и опционалном радњом. Према Material Design Guidelines, 2025, Snackbar треба да се користи за кратке поруке без критично важних информација.

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

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Мени") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        drawerContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Ставка 1")
                Text("Ставка 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Садржај")
        }
    }
}

Примјер изградње екрана са Scaffold

Пун примјер екрана са Scaffold укључује TopAppBar, BottomNavigation, FloatingActionButton и Snackbar за приказивање обавештења при притиску на FAB. ScaffoldState се прослеђује свим компонентама за координацију стања.

@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, "Почетна") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Поставке") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Готово")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Добро дошли")
        }
    }
}

InnerPadding и адаптивни лајаут са Scaffold

innerPadding — су PaddingValues које Scaffold прослеђује у content блок. Они садрже размаке потребне да се садржај не преклапа преко statusBar, navigationBar, topBar и bottomBar. Коришчење innerPadding је обавезно за правилан приказ на различитим уређајима.

Scaffold аутоматски израчунава innerPadding на основу системских размака и висине постављених слотова. На уређајима са острвцом камере или изрезом на екрану, Scaffold прилагођава размаке за статусну трку. На старијим уређајима са физичким дугметима, доњи размак може бити нула.

Према Android Developers, 2024, innerPadding треба да се примени на корени контејнер садржаја путем Modifier.padding(innerPadding). Ако садржај користи контејнер за помицање, innerPadding се примењује путем Modifier.consumeWindowInsets за правилан рад тастатуре и системских покрета.

• Примените innerPadding на корени контејнер садржаја путем Modifier.padding(innerPadding)
• За контејнере за помицање користите Modifier.consumeWindowInsets(innerPadding)
• Не додајте додатне размаке за статусну трку — Scaffold то ради аутоматски
• У одсуству topBar или bottomBar, одговарајући размаци у innerPadding биће нула