Функция MediumTopAppBar

Функция MediumTopAppBar рисует панель выше обычной TopAppBar. Заголовок - лямбда title, боковые слоты - navigationIcon и actions. Поведение при прокрутке задают через scrollBehavior, его получают функцией rememberTopAppBarScrollBehavior.

Синтаксис

MediumTopAppBar(
	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.MediumTopAppBar
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 = {
					MediumTopAppBar(
						title = { Text("abcde") },
					)
				},
			) { padding ->
				Text(
					text = "12345",
					modifier = Modifier.padding(padding),
				)
			}
		}
	}
}

На экране верхняя панель будет выше компактной TopAppBar.

Пример

Давайте сожмём панель при прокрутке длинного текста:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MediumTopAppBar
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.enterAlwaysScrollBehavior(
				rememberTopAppBarState(),
			)
			Scaffold(
				modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
				topBar = {
					MediumTopAppBar(
						title = { Text("abcde") },
						scrollBehavior = scrollBehavior,
					)
				},
			) { padding ->
				Text(
					text = "12345\n".repeat(40),
					modifier = Modifier
						.padding(padding)
						.verticalScroll(rememberScrollState()),
				)
			}
		}
	}
}

На экране при прокрутке вниз панель постепенно сожмётся, а при прокрутке вверх снова развернётся.

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

функция LargeTopAppBar,
которая рисует ещё более высокую панель
функция TopAppBar,
которая остаётся компактной без scrollBehavior
метод verticalScroll,
который прокручивает длинное содержимое под панелью
функция Scaffold,
которая держит панель над экраном