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 ще бъдат нула