Функция NavigationRail

Функция NavigationRail рисует узкую панель слева или справа. Пункты - функции NavigationRailItem в лямбде content. Сверху можно поставить логотип через header. На телефоне чаще берут NavigationBar, на планшете - rail.

Синтаксис

NavigationRail {
	NavigationRailItem(
		selected = true,
		onClick = { },
		icon = { },
		label = { Text("abcde") },
	)
}

Параметры

Параметр	Описание
`header`	Лямбда с элементом над вкладками, например логотипом.
`content`	Лямбда с пунктами `NavigationRailItem`. Приёмник - область столбца.

Пример

Давайте поставим 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.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) }
			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.Settings,
								contentDescription = "12345",
							)
						},
						label = { Text("12345") },
					)
				}
				Text(text = if (tab == 0) "abcde" else "12345")
			}
		}
	}
}

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

Пример

Давайте добавим иконку в header над вкладками:

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.Menu
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationRail
import androidx.compose.material3.NavigationRailItem
import androidx.compose.material3.Text

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Row {
				NavigationRail(
					header = {
						Icon(
							imageVector = Icons.Filled.Menu,
							contentDescription = "abcde",
						)
					},
				) {
					NavigationRailItem(
						selected = true,
						onClick = { },
						icon = {
							Icon(
								imageVector = Icons.Filled.Home,
								contentDescription = "12345",
							)
						},
						label = { Text("abcde") },
					)
				}
				Text(text = "12345")
			}
		}
	}
}

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

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

функция NavigationRailItem,
которая рисует один пункт боковой панели
функция NavigationBar,
которая ставит те же вкладки снизу
функция Row,
которая ставит rail и content в один ряд
функция PermanentNavigationDrawer,
которая держит широкое меню постоянно открытым