Функция NavigationBarItem

Функция NavigationBarItem рисует одну вкладку внутри NavigationBar. Выбор задают флагом selected, реакцию на нажатие - в onClick. Иконку передают в icon, подпись - в label.

Синтаксис

NavigationBarItem(
	selected = true,
	onClick = { },
	icon = { Icon(Icons.Filled.Home, contentDescription = "abcde") },
	label = { Text("abcde") },
)

Параметры

Параметр	Описание
`selected`	`true`, если вкладка сейчас активна. Меняет цвет иконки и подписи.
`onClick`	Лямбда без аргументов при нажатии на вкладку.
`icon`	Лямбда с иконкой вкладки. Обычно вызывают `Icon` с контуром из `Icons`.
`label`	Лямбда с короткой подписью под иконкой.
`alwaysShowLabel`	Если `false`, подпись видна только у выбранной вкладки.

Пример

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

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var tab by remember { mutableIntStateOf(0) }
			Column {
				Text(text = if (tab == 0) "abcde" else "12345")
				NavigationBar {
					NavigationBarItem(
						selected = tab == 0,
						onClick = { tab = 0 },
						icon = {
							Icon(
								imageVector = Icons.Filled.Home,
								contentDescription = "abcde",
							)
						},
						label = { Text("abcde") },
					)
					NavigationBarItem(
						selected = tab == 1,
						onClick = { tab = 1 },
						icon = {
							Icon(
								imageVector = Icons.Filled.Settings,
								contentDescription = "12345",
							)
						},
						label = { Text("12345") },
					)
				}
			}
		}
	}
}

На экране выбранная вкладка подсветится, а строка над панелью покажет "abcde" или "12345".

Пример

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

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.Home
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var tab by remember { mutableIntStateOf(0) }
			NavigationBar {
				NavigationBarItem(
					selected = tab == 0,
					onClick = { tab = 0 },
					icon = {
						Icon(
							imageVector = Icons.Filled.Home,
							contentDescription = "abcde",
						)
					},
					label = { Text("abcde") },
					alwaysShowLabel = false,
				)
				NavigationBarItem(
					selected = tab == 1,
					onClick = { tab = 1 },
					icon = {
						Icon(
							imageVector = Icons.Filled.Person,
							contentDescription = "12345",
						)
					},
					label = { Text("12345") },
					alwaysShowLabel = false,
				)
			}
		}
	}
}

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

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

функция NavigationBar,
которая собирает несколько пунктов в ряд
функция NavigationRailItem,
которая рисует такой же пункт на боковой панели
функция Icon,
которую ставят в параметр icon
метод clickable,
который ловит нажатие на отдельный composable вне панели