Функция DismissibleNavigationDrawer

Функция DismissibleNavigationDrawer рисует меню и content рядом, как PermanentNavigationDrawer, но панель можно спрятать. Состояние хранят в drawerState, меню - в drawerContent, экран - в content. Открытие и закрытие делают методами open и close.

Синтаксис

DismissibleNavigationDrawer(
	drawerState = drawerState,
	drawerContent = { },
) {
	content()
}

Параметры

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

Пример

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

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.Menu
import androidx.compose.material3.DismissibleNavigationDrawer
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
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 androidx.compose.ui.Modifier
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()
			DismissibleNavigationDrawer(
				drawerState = drawerState,
				drawerContent = {
					NavigationDrawerItem(
						label = { Text("abcde") },
						selected = true,
						onClick = { },
						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),
					)
				}
			}
		}
	}
}

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

Пример

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

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.DismissibleNavigationDrawer
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
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()
			DismissibleNavigationDrawer(
				drawerState = drawerState,
				drawerContent = {
					NavigationDrawerItem(
						label = { Text("abcde") },
						selected = true,
						onClick = {
							scope.launch { drawerState.close() }
						},
						icon = {
							Icon(
								imageVector = Icons.Filled.Home,
								contentDescription = "abcde",
							)
						},
					)
				},
			) {
				Text(text = "12345")
			}
		}
	}
}

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

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

функция ModalNavigationDrawer,
которая накрывает экран затемнением
функция PermanentNavigationDrawer,
которая не прячет меню
функция rememberDrawerState,
которая создаёт drawerState
класс DrawerState,
которым управляют открытием панели