Функция BottomAppBar

Функция BottomAppBar рисует горизонтальную панель внизу экрана. Кнопки передают в лямбду actions или собирают свой ряд в content. Панель часто ставят в bottomBar у Scaffold.

Синтаксис

BottomAppBar(
	actions = {
		IconButton(onClick = { }) { }
	},
)

Параметры

Параметр	Описание
`actions`	Лямбда с иконками и кнопками в ряд.
`floatingActionButton`	Лямбда с круглой кнопкой, которая выступает из панели.
`content`	Лямбда с произвольным содержимым панели вместо готового набора actions.

Пример

Давайте поставим две иконки на нижнюю панель:

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.Edit
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.BottomAppBar
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(
				bottomBar = {
					BottomAppBar(
						actions = {
							IconButton(onClick = { }) {
								Icon(
									imageVector = Icons.Filled.Edit,
									contentDescription = "abcde",
								)
							}
							IconButton(onClick = { }) {
								Icon(
									imageVector = Icons.Filled.Share,
									contentDescription = "12345",
								)
							}
						},
					)
				},
			) { padding ->
				Text(
					text = "abcde",
					modifier = Modifier.padding(padding),
				)
			}
		}
	}
}

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

Пример

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

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.Refresh
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
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 label by remember { mutableStateOf("abcde") }
			Scaffold(
				bottomBar = {
					BottomAppBar(
						actions = {
							IconButton(
								onClick = {
									label = if (label == "abcde") "12345" else "abcde"
								},
							) {
								Icon(
									imageVector = Icons.Filled.Refresh,
									contentDescription = "12345",
								)
							}
						},
					)
				},
			) { padding ->
				Text(
					text = label,
					modifier = Modifier.padding(padding),
				)
			}
		}
	}
}

На экране по нажатию на иконку обновления текст на экране переключится.

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

функция NavigationBar,
которая рисует нижние вкладки вместо набора actions
функция Scaffold,
которая ставит панель в каркас
функция Icon,
которую кладут в actions
функция TopAppBar,
которая рисует верхнюю панель того же каркаса