Функция ModalDrawerSheet

Функция ModalDrawerSheet рисует лист внутри ModalNavigationDrawer. Задаёт ширину, цвет и форму панели. Пункты меню кладут в лямбду content, чаще всего NavigationDrawerItem.

Синтаксис

ModalDrawerSheet {
	NavigationDrawerItem(
		label = { Text("abcde") },
		selected = true,
		onClick = { },
		icon = { },
	)
}

Параметры

Параметр	Описание
`drawerShape`	Форма края панели. Принимает значение интерфейса Shape.
`drawerContainerColor`	Цвет фона листа. Принимает значение класса `Color`.
`content`	Лямбда с пунктами и заголовком меню.

Пример

Давайте положим один пункт в лист 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

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

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

Пример

Давайте зададим свой цвет фона листа:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
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.ui.graphics.Color

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val drawerState = rememberDrawerState(DrawerValue.Open)
			ModalNavigationDrawer(
				drawerState = drawerState,
				drawerContent = {
					ModalDrawerSheet(
						drawerContainerColor = Color(0xFFE8EAF6),
					) {
						NavigationDrawerItem(
							label = { Text("12345") },
							selected = true,
							onClick = { },
							icon = { },
						)
					}
				},
			) {
				Text(text = "abcde")
			}
		}
	}
}

На экране фон бокового листа станет светло-фиолетовым.

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

функция NavigationDrawerItem,
которую ставят внутри листа
функция ModalNavigationDrawer,
которая оборачивает лист и content
функция rememberDrawerState,
которая хранит открыт ли drawer
класс Color,
которым задают drawerContainerColor