Функция NavigationDrawerItem

Функция NavigationDrawerItem рисует одну строку в выдвижном меню. Подпись передают в label, выбор - через selected, нажатие - через onClick. Слева можно поставить icon из Icons. Строку кладут в ModalDrawerSheet.

Синтаксис

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

Параметры

Параметр	Описание
`label`	Лямбда с текстом пункта меню.
`selected`	`true`, если пункт сейчас активен.
`onClick`	Лямбда при нажатии на строку.
`icon`	Лямбда с иконкой слева от подписи.
`badge`	Лямбда с меткой справа, например счётчиком.

Пример

Давайте подсветим выбранный пункт в drawer:

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.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val drawerState = rememberDrawerState(DrawerValue.Open)
			var item by remember { mutableIntStateOf(0) }
			ModalNavigationDrawer(
				drawerState = drawerState,
				drawerContent = {
					ModalDrawerSheet {
						NavigationDrawerItem(
							label = { Text("abcde") },
							selected = item == 0,
							onClick = { item = 0 },
							icon = {
								Icon(
									imageVector = Icons.Filled.Home,
									contentDescription = "abcde",
								)
							},
						)
						NavigationDrawerItem(
							label = { Text("12345") },
							selected = item == 1,
							onClick = { item = 1 },
							icon = {
								Icon(
									imageVector = Icons.Filled.Settings,
									contentDescription = "12345",
								)
							},
						)
					}
				},
			) {
				Text(text = if (item == 0) "abcde" else "12345")
			}
		}
	}
}

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

Пример

Давайте закроем drawer после нажатия на пункт:

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.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.rememberCoroutineScope
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val drawerState = rememberDrawerState(DrawerValue.Open)
			val scope = rememberCoroutineScope()
			ModalNavigationDrawer(
				drawerState = drawerState,
				drawerContent = {
					ModalDrawerSheet {
						NavigationDrawerItem(
							label = { Text("abcde") },
							selected = true,
							onClick = {
								scope.launch { drawerState.close() }
							},
							icon = {
								Icon(
									imageVector = Icons.Filled.Home,
									contentDescription = "abcde",
								)
							},
						)
					}
				},
			) {
				Text(text = "12345")
			}
		}
	}
}

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

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

функция ModalDrawerSheet,
которая держит пункты меню на листе
функция NavigationRailItem,
которая рисует похожий пункт на rail
метод close,
который прячет drawer после выбора
функция Icon,
которую ставят в icon