Функция NavigationRailItem

Функция NavigationRailItem рисует одну вкладку внутри NavigationRail. Активность задают через selected, нажатие - через onClick. Иконку кладут в icon, подпись - в label. Параметры совпадают с NavigationBarItem.

Синтаксис

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

Параметры

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

Пример

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

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
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.NavigationRail
import androidx.compose.material3.NavigationRailItem
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) }
			Row {
				NavigationRail {
					NavigationRailItem(
						selected = tab == 0,
						onClick = { tab = 0 },
						icon = {
							Icon(
								imageVector = Icons.Filled.Home,
								contentDescription = "abcde",
							)
						},
						label = { Text("abcde") },
					)
					NavigationRailItem(
						selected = tab == 1,
						onClick = { tab = 1 },
						icon = {
							Icon(
								imageVector = Icons.Filled.Person,
								contentDescription = "12345",
							)
						},
						label = { Text("12345") },
					)
				}
				Text(text = if (tab == 0) "abcde" else "12345")
			}
		}
	}
}

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

Пример

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

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.NavigationRail
import androidx.compose.material3.NavigationRailItem
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) }
			NavigationRail {
				NavigationRailItem(
					selected = tab == 0,
					onClick = { tab = 0 },
					icon = {
						Icon(
							imageVector = Icons.Filled.Home,
							contentDescription = "abcde",
						)
					},
					label = { Text("abcde") },
					alwaysShowLabel = false,
				)
				NavigationRailItem(
					selected = tab == 1,
					onClick = { tab = 1 },
					icon = {
						Icon(
							imageVector = Icons.Filled.Settings,
							contentDescription = "12345",
						)
					},
					label = { Text("12345") },
					alwaysShowLabel = false,
				)
			}
		}
	}
}

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

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

функция NavigationRail,
которая собирает пункты в боковой столбец
функция NavigationBarItem,
которая рисует такой же пункт снизу экрана
функция NavigationDrawerItem,
которая рисует строку в выдвижном меню
функция Icon,
которую передают в icon