Scaffold sa Jetpack Compose — ano ito, mga pag-aari at kung paano ito gumagana

Ano ang Scaffold sa Jetpack Compose

Scaffold — ay isang composable function na nagpapatupad ng balangkas ng screen ayon sa detalye ng Material Design. Ang Scaffold ay hindi isang container sa karaniwang kahulugan — ito ay isang layout manager na nag-uugnay sa paglalagay ng maraming karaniwang Material component sa screen.

Pinamamahalaan ng Scaffold ang mga puwang para sa TopAppBar, BottomBar at FloatingActionButton, pati na rin ang mga system element — status bar at navigation panel. Tinitiyak nito na ang nilalaman ay hindi sumasakop sa mga system element at sumusunod sa mga alituntunin ng Material Design.

Ayon sa Material Design Guidelines, 2025, ang Scaffold ay dapat na root element ng bawat screen ng aplikasyon. Pinapalitan nito ang lumang CoordinatorLayout mula sa View system at nagbibigay ng mas simple at deklaratibong API para sa pagbuo ng layout ng screen.

Pangunahing lagda ng Scaffold

Scaffold tumatanggap ng mga parameter na modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost at content. Ang parameter na content ay tumatanggap ng PaddingValues — mga puwang na dapat isaalang-alang ng pangunahing nilalaman.

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

Mga slot ng Scaffold: topBar, bottomBar at floatingActionButton

topBar — slot para sa paglalagay ng itaas na panel ng aplikasyon, karaniwang TopAppBar o LargeTopAppBar. Awtomatikong nagdaragdag ang Scaffold ng puwang sa innerPadding para sa nilalaman upang hindi ito sumakop sa topBar. Ang TopAppBar ay maaaring maglaman ng pamagat, navigation icon at mga aksyon.

bottomBar — slot para sa ibabang navigation panel. Sinusuportahan ang BottomNavigation, BottomAppBar o NavigationBar. Isinasaalang-alang ng Scaffold ang taas ng bottomBar sa pagkalkula ng innerPadding para sa nilalaman. Ayon sa Material Design Guidelines, 2025, ang bottomBar ay dapat gamitin sa mga screen na may 3–5 navigation point.

floatingActionButton — slot para sa lumulutang na button ng aksyon. Awtomatikong pumuwesto ang Scaffold ng FAB ayon sa detalye ng Material Design — sa kanang ibabang sulok na may tamang puwang. Ang floatingActionButtonPosition ay nagpapahintulot na ilipat ang FAB sa gitna ng ibabang gilid ng screen.

Halimbawa kasama ang lahat ng slot

Sa halimbawang ito, ang Scaffold ay gumagamit ng lahat ng pangunahing slot: TopAppBar na may pamagat, BottomBar na may tatlong navigation element at FloatingActionButton para sa pangunahing aksyon.

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

ScaffoldState: pamamahala ng Drawer at Snackbar

ScaffoldState — object ng estado ng Scaffold na pinagsasama ang DrawerState at SnackbarHostState. Ang DrawerState ay namamahala sa pagbubukas at pagsasara ng side menu, at ang SnackbarHostState — sa pagpapakita at pagtatago ng Snackbar. Ang estado ay nilikha sa pamamagitan ng rememberScaffoldState() at ipinapasa sa parameter na scaffoldState.

DrawerState ay nagbibigay ng mga method na open at close para sa programatikong pamamahala ng Drawer. Ang estado ng Drawer ay maaaring bukas, sarado o bahagyang bukas. Ang drawerGesturesEnabled ay nagpapahintulot na huwag paganahin ang kilos ng pagbubukas ng Drawer sa pamamagitan ng pag-swipe, na nag-iiwan lamang ng programatikong pagbubukas sa pamamagitan ng button.

SnackbarHostState namamahala sa Snackbar — pansamantalang mga notipikasyon sa ibabang bahagi ng screen. Ang method na showSnackbar ay nagpapakita ng Snackbar na may mensahe at opsyonal na aksyon. Ayon sa Material Design Guidelines, 2025, ang Snackbar ay dapat gamitin para sa maiikling mensahe na walang kritikal na mahalagang impormasyon.

@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("Nilalaman")
        }
    }
}

Halimbawa ng pagbuo ng screen gamit ang Scaffold

Isang kumpletong halimbawa ng screen na may Scaffold ay kinabibilangan ng TopAppBar, BottomNavigation, FloatingActionButton at Snackbar para sa pagpapakita ng mga notipikasyon kapag pinindot ang FAB. Ang ScaffoldState ay ipinapasa sa lahat ng component para sa koordinasyon ng estado.

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

InnerPadding at adaptive layout gamit ang Scaffold

innerPadding — ay PaddingValues na ipinapasa ng Scaffold sa content block. Naglalaman ang mga ito ng mga puwang na kinakailangan upang hindi sumakop ang nilalaman sa statusBar, navigationBar, topBar at bottomBar. Ang paggamit ng innerPadding ay mandatory para sa tamang pagpapakita sa iba’t ibang device.

Ang Scaffold ay awtomatikong nagkalkula ng innerPadding batay sa mga system na puwang at taas ng mga naka-install na slot. Sa mga device na may camera island o screen cutout, inaayos ng Scaffold ang mga puwang para sa status bar. Sa mas lumang device na may physical na button, ang ibabang puwang ay maaaring zero.

Ayon sa Android Developers, 2024, ang innerPadding ay dapat ilapat sa root container ng nilalaman sa pamamagitan ng Modifier.padding(innerPadding). Kung ang nilalaman ay gumagamit ng scrollable container, ang innerPadding ay inilalapat sa pamamagitan ng Modifier.consumeWindowInsets para sa tamang paggana ng keyboard at system gestures.

• Ilapat ang innerPadding sa root container ng nilalaman sa pamamagitan ng Modifier.padding(innerPadding)
• Para sa mga scrollable container gamitin ang Modifier.consumeWindowInsets(innerPadding)
• Huwag magdagdag ng karagdagang puwang para sa status bar — awtomatikong ginagawa ito ng Scaffold
• Kung walang topBar o bottomBar, ang mga kaukulang puwang sa innerPadding ay magiging zero