Scaffold и TopAppBar

Собираем стандартный каркас экрана Material 3 со строкой заголовка через Scaffold и TopAppBar.

Scaffold — composable-каркас, дающий готовые слоты для верхней панели, нижней навигации, плавающей кнопки и основного контента.

Зачем нужен Scaffold

Почти каждый экран имеет одинаковую структуру: панель сверху, контент в середине, иногда кнопка-FAB. Scaffold предоставляет под это именованные слоты и сам следит за системными отступами (статус-бар, вырезы экрана):

@Composable
fun MainScreen() {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Главная") })
        }
    ) { innerPadding ->
        Column(modifier = Modifier.padding(innerPadding)) {
            Text("Содержимое экрана")
        }
    }
}

Важность innerPadding

Тело Scaffold получает параметр innerPadding — это отступы, которые занимают панель и системные элементы. Их обязательно применить к контенту через Modifier.padding(innerPadding), иначе содержимое уедет под TopAppBar.

Это частая ловушка новичков: на первый взгляд экран выглядит нормально, но верхняя строка контента оказывается частично спрятана под панелью. Поэтому считайте применение innerPadding обязательным шагом, а не опциональным. В Material 3 у TopAppBar есть варианты — CenterAlignedTopAppBar (заголовок по центру), MediumTopAppBar и LargeTopAppBar (крупный заголовок, который сжимается при прокрутке). Все они кладутся в тот же слот topBar.

ASCII-макет

+---------------------------+
| Главная        (TopAppBar)|
+---------------------------+
| Содержимое экрана         |
|                           |
+---------------------------+

Слоты Scaffold

Как работает под капотом

Scaffold измеряет свои панели (top/bottom bar) и вычисляет, сколько места они занимают. Эти размеры он складывает в innerPadding и передаёт в тело. Так контент знает, где начинается «безопасная» зона, и не залезает под панели или системные элементы. Это избавляет вас от ручного подсчёта высоты статус-бара.

Частые ошибки

• Проигнорировать innerPadding — контент окажется под TopAppBar.
• Верстать панель вручную внутри Column вместо использования слота topBar — теряются стандартные поведение и отступы.
• Класть несколько Scaffold друг в друга — двойные панели и путаница с отступами.

Итог

• Scaffold даёт слоты для панелей, FAB и контента и учитывает системные отступы.
• innerPadding обязательно применять к телу, иначе контент перекроется панелью.
• TopAppBar кладут в слот topBar, а не верстают вручную.