Навигационный ящик

Компонент панели навигации — это выдвижное меню, которое позволяет пользователям переходить к различным разделам вашего приложения. Пользователи могут активировать его, проведя пальцем сбоку или коснувшись значка меню.

Рассмотрим эти три варианта использования для реализации навигационного ящика:

• Организация контента: дайте пользователям возможность переключаться между различными категориями, например, в новостях или приложениях для ведения блогов.
• Управление учетной записью: предоставление быстрых ссылок на настройки учетной записи и разделы профиля в приложениях с учетными записями пользователей.
• Обнаружение функций. Организуйте несколько функций и настроек в одном меню, чтобы облегчить пользователям обнаружение и доступ к сложным приложениям.

В Material Design существует два типа навигационных ящиков:

• Стандартный: разделяет пространство на экране с другим содержимым.
• Модальное: появляется поверх другого контента на экране.

Пример

Вы можете использовать составной элемент ModalNavigationDrawer для реализации навигационного ящика.

Используйте слот drawerContent , чтобы предоставить ModalDrawerSheet и предоставить содержимое ящика, как в следующем примере:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer принимает ряд дополнительных параметров ящика. Например, вы можете переключить, будет ли ящик реагировать на перетаскивание с помощью gesturesEnabled , как показано в следующем примере:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

Контролируйте поведение

Чтобы контролировать, как ящик открывается и закрывается, используйте DrawerState . Вы должны передать DrawerState в ModalNavigationDrawer используя параметр drawerState .

DrawerState предоставляет доступ к функциям open и close , а также свойствам, связанным с текущим состоянием ящика. Для этих приостанавливающих функций требуется CoroutineScope , экземпляр которого можно создать с помощью rememberCoroutineScope . Вы также можете вызывать функции приостановки в ответ на события пользовательского интерфейса.

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt