Функция CenterAlignedTopAppBar

Функция CenterAlignedTopAppBar похожа на TopAppBar, но заголовок в title стоит по центру между navigationIcon и actions. Все три слота - лямбды с composable внутри.

Синтаксис

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

Параметры

Параметр	Описание
`title`	Лямбда с заголовком по центру панели.
`navigationIcon`	Лямбда с иконкой слева.
`actions`	Лямбда с кнопками справа.

Пример

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

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

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

На экране заголовок "abcde" будет по центру верхней панели.

Пример

Давайте добавим симметричные кнопки по краям:

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.Menu
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Scaffold(
				topBar = {
					CenterAlignedTopAppBar(
						title = { Text("abcde") },
						navigationIcon = {
							IconButton(onClick = { }) {
								Icon(
									imageVector = Icons.Filled.Menu,
									contentDescription = "abcde",
								)
							}
						},
						actions = {
							IconButton(onClick = { }) {
								Icon(
									imageVector = Icons.Filled.MoreVert,
									contentDescription = "12345",
								)
							}
						},
					)
				},
			) { padding ->
				Text(
					text = "12345",
					modifier = Modifier.padding(padding),
				)
			}
		}
	}
}

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

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

функция TopAppBar,
которая ставит заголовок у начала панели
функция LargeTopAppBar,
которая рисует большую сворачиваемую панель
функция Scaffold,
которая вставляет панель в каркас
функция Icon,
которую ставят в navigationIcon и actions