Функция NavigationBar

Функция NavigationBar рисует ряд вкладок внизу экрана. Каждый пункт - функция NavigationBarItem внутри лямбды content. Панель ставят в bottomBar у Scaffold.

Синтаксис

NavigationBar {
	NavigationBarItem(
		selected = true,
		onClick = { },
		icon = { },
		label = { Text("abcde") },
	)
}

Параметры

Параметр	Описание
`content`	Лямбда с пунктами `NavigationBarItem`. Приёмник - область ряда.

Пример

Давайте сделаем две вкладки с подписями:

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.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.Scaffold
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
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var tab by remember { mutableIntStateOf(0) }
			Scaffold(
				bottomBar = {
					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.Person,
									contentDescription = "12345",
								)
							},
							label = { Text("12345") },
						)
					}
				},
			) { padding ->
				Text(
					text = if (tab == 0) "abcde" else "12345",
					modifier = Modifier.padding(padding),
				)
			}
		}
	}
}

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

Пример

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

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.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) }
			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.Settings,
							contentDescription = "12345",
						)
					},
					label = { Text("12345") },
					alwaysShowLabel = false,
				)
			}
		}
	}
}

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

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

функция NavigationBarItem,
которая рисует один пункт панели
функция NavigationRail,
которая ставит те же вкладки сбоку на широком экране
функция Scaffold,
которая держит панель под content
функция BottomAppBar,
которая рисует нижнюю панель с actions без вкладок