Функция ModalNavigationDrawer

Функция ModalNavigationDrawer рисует основной экран и боковую панель, которая наезжает сверху. Состояние панели хранят в drawerState из rememberDrawerState. Меню собирают в drawerContent, обычно с ModalDrawerSheet и NavigationDrawerItem. Экран приложения - в content.

Синтаксис

ModalNavigationDrawer(
	drawerState = drawerState,
	drawerContent = {
		ModalDrawerSheet { }
	},
) {
	content()
}

Параметры

Параметр	Описание
`drawerState`	Состояние панели. Тип - `DrawerState`.
`drawerContent`	Лямбда с содержимым выдвижного меню.
`gesturesEnabled`	Разрешает открывать и закрывать панель жестом с края.
`content`	Лямбда с основным экраном под затемнением.

Пример

Давайте откроем меню кнопкой на верхней панели:

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.ui.Modifier
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
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.Closed)
			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",
								)
							},
						)
					}
				},
			) {
				Scaffold(
					topBar = {
						TopAppBar(
							title = { Text("12345") },
							navigationIcon = {
								IconButton(
									onClick = {
										scope.launch { drawerState.open() }
									},
								) {
									Icon(
										imageVector = Icons.Filled.Menu,
										contentDescription = "12345",
									)
								}
							},
						)
					},
				) { padding ->
					Text(
						text = "12345",
						modifier = Modifier.padding(padding),
					)
				}
			}
		}
	}
}

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

Пример

Давайте закроем панель по выбору второго пункта:

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.rememberCoroutineScope
import androidx.compose.runtime.setValue
import kotlinx.coroutines.launch

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

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

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

функция DismissibleNavigationDrawer,
которая сдвигает content вместе с панелью
функция PermanentNavigationDrawer,
которая держит меню всегда видимым на широком экране
функция rememberDrawerState,
которая создаёт drawerState для панели
функция ModalDrawerSheet,
которую ставят внутри drawerContent