Функция PermanentNavigationDrawer

Функция PermanentNavigationDrawer рисует меню и content в один ряд. Панель не перекрывает экран и не закрывается жестом. Меню передают в drawerContent, основной экран - в content. Подходит для широких экранов и планшетов.

Синтаксис

PermanentNavigationDrawer(
	drawerContent = {
		NavigationDrawerItem(
			label = { Text("abcde") },
			selected = true,
			onClick = { },
			icon = { },
		)
	},
) {
	content()
}

Параметры

Параметр	Описание
`drawerContent`	Лямбда с постоянной боковой панелью. Обычно внутри `NavigationDrawerItem`.
`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.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.PermanentNavigationDrawer
import androidx.compose.material3.Text

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

На экране слева всегда будет пункт меню "abcde", справа - текст "12345".

Пример

Давайте сменим экран по нажатию на пункт меню:

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.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.PermanentNavigationDrawer
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

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var item by remember { mutableIntStateOf(0) }
			PermanentNavigationDrawer(
				drawerContent = {
					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.

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

функция DismissibleNavigationDrawer,
которая прячет меню на узком экране
функция ModalNavigationDrawer,
которая накрывает экран выдвижной панелью
функция NavigationRail,
которая ставит узкие вкладки вместо широкого меню
функция NavigationDrawerItem,
которая рисует строку в drawerContent