Функция TopAppBar

Функция TopAppBar рисует компактную верхнюю панель. Заголовок передают в лямбду title, обычно с функцией Text. Кнопку слева - в navigationIcon, действия справа - в actions. Панель часто ставят в параметр topBar у Scaffold.

Синтаксис

TopAppBar(
	title = { Text("abcde") },
	navigationIcon = { },
	actions = { },
)

Параметры

Параметр	Описание
`title`	Лямбда с заголовком панели.
`navigationIcon`	Лямбда с иконкой слева, например меню или назад.
`actions`	Лямбда с кнопками справа. Приёмник - область ряда.
`colors`	Цвета фона, текста и иконок панели.

Пример

Давайте выведем панель только с заголовком:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
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
						.fillMaxSize()
						.padding(padding),
				)
			}
		}
	}
}

На экране сверху будет панель с текстом "abcde".

Пример

Давайте добавим иконку меню слева и кнопку справа:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.ui.Modifier
import androidx.compose.runtime.getValue
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var label by remember { mutableStateOf("abcde") }
			Scaffold(
				topBar = {
					TopAppBar(
						title = { Text(label) },
						navigationIcon = {
							IconButton(onClick = { }) {
								Icon(
									imageVector = Icons.Filled.Menu,
									contentDescription = "abcde",
								)
							}
						},
						actions = {
							IconButton(
								onClick = {
									label = if (label == "abcde") "12345" else "abcde"
								},
							) {
								Icon(
									imageVector = Icons.Filled.Search,
									contentDescription = "12345",
								)
							}
						},
					)
				},
			) { padding ->
				Text(
					text = label,
					modifier = Modifier.padding(padding),
				)
			}
		}
	}
}

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

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

функция CenterAlignedTopAppBar,
которая центрирует заголовок на панели
функция MediumTopAppBar,
которая сжимается при прокрутке содержимого
функция Scaffold,
которая ставит панель в каркас экрана
функция Icon,
которую берут из класса Icons для кнопок панели