Функция LargeTopAppBar

Функция LargeTopAppBar рисует самую высокую панель в семействе TopAppBar. Заголовок передают в title, иконки - в navigationIcon и actions. Чтобы панель сжималась при прокрутке, передают scrollBehavior из TopAppBarDefaults.enterAlwaysScrollBehavior.

Синтаксис

LargeTopAppBar(
	title = { Text("abcde") },
	scrollBehavior = scrollBehavior,
)

Параметры

Параметр	Описание
`title`	Лямбда с крупным заголовком на развёрнутой панели.
`navigationIcon`	Лямбда с иконкой слева.
`actions`	Лямбда с кнопками справа.
`scrollBehavior`	Сжимает панель, когда пользователь прокручивает содержимое.

Пример

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

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LargeTopAppBar
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 = {
					LargeTopAppBar(
						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.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LargeTopAppBar
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
				rememberTopAppBarState(),
			)
			Scaffold(
				modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
				topBar = {
					LargeTopAppBar(
						title = { Text("abcde") },
						scrollBehavior = scrollBehavior,
					)
				},
			) { padding ->
				LazyColumn(modifier = Modifier.padding(padding)) {
					items(List(30) { "12345" }) { line ->
						Text(text = line)
					}
				}
			}
		}
	}
}

На экране при прокрутке списка большой заголовок уйдёт в компактную панель.

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

функция MediumTopAppBar,
которая рисует панель средней высоты
функция TopAppBar,
которая сразу компактная
метод verticalScroll,
который прокручивает длинный текст под панелью
функция Scaffold,
которая фиксирует панель над content