Функция Scaffold

Функция Scaffold рисует каркас экрана Material. Верхнюю панель передают в topBar, нижнюю - в bottomBar, круглую кнопку действия - в floatingActionButton. Основной экран - в лямбду content. Ей приходит отступ PaddingValues, чтобы текст не заезжал под панели.

Синтаксис

Scaffold(
	topBar = { },
	bottomBar = { },
) { padding ->
	content(padding)
}

Параметры

Параметр	Описание
`topBar`	Лямбда с верхней панелью. Часто внутри вызывают `TopAppBar`.
`bottomBar`	Лямбда с нижней панелью. Подходит `NavigationBar` или `BottomAppBar`.
`floatingActionButton`	Лямбда с круглой кнопкой действия над содержимым.
`snackbarHost`	Лямбда, куда выводят всплывающие сообщения.
`content`	Лямбда с основным экраном. Первый аргумент - отступы под панели.

Пример

Давайте соберём экран с верхней панелью и текстом:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Scaffold(
				topBar = {
					TopAppBar(
						title = { Text("abcde") },
					)
				},
			) { padding ->
				Text(
					text = "12345",
					modifier = Modifier.padding(padding),
				)
			}
		}
	}
}

На экране сверху будет панель с заголовком "abcde", ниже - текст "12345" с отступом под панель.

Пример

Давайте добавим нижние вкладки:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var tab by remember { mutableIntStateOf(0) }
			Scaffold(
				bottomBar = {
					NavigationBar {
						NavigationBarItem(
							selected = tab == 0,
							onClick = { tab = 0 },
							icon = {
								Icon(
									imageVector = Icons.Filled.Home,
									contentDescription = "abcde",
								)
							},
							label = { Text("abcde") },
						)
						NavigationBarItem(
							selected = tab == 1,
							onClick = { tab = 1 },
							icon = {
								Icon(
									imageVector = Icons.Filled.Settings,
									contentDescription = "12345",
								)
							},
							label = { Text("12345") },
						)
					}
				},
			) { padding ->
				Text(
					text = if (tab == 0) "abcde" else "12345",
					modifier = Modifier.padding(padding),
				)
			}
		}
	}
}

На экране снизу будет панель с двумя вкладками, а текст в центре сменится по нажатию.

Смотрите также

функция TopAppBar,
которая рисует верхнюю панель каркаса
функция NavigationBar,
которая ставит нижние вкладки
функция ModalNavigationDrawer,
которая выдвигает боковое меню поверх экрана
функция Column,
которая ставит дочерние элементы в столбец внутри content