Komponent schowarka nawigacyjna to wysuwane menu, które umożliwia użytkownikom poruszanie się po różnych sekcjach aplikacji. Mogą go aktywować, przesuwając palcem od krawędzi lub klikając ikonę menu.
Rozważ te 3 przypadki użycia szuflady nawigacji:
- Organizowanie treści: umożliwia użytkownikom przełączanie się między różnymi kategoriami, np. w aplikacjach do czytania wiadomości lub prowadzenia bloga.
- Zarządzanie kontem: udostępnij szybkie linki do ustawień konta i sekcji profilu w aplikacjach z kontami użytkowników.
- Odkrywanie funkcji: możesz uporządkować wiele funkcji i ustawień w jednym menu, aby ułatwić użytkownikom ich znajdowanie i dostęp do nich w kompleksowych aplikacjach.
W Material Design występują 2 rodzaje paneli nawigacyjnych:
- Standardowy: udostępnia przestrzeń na ekranie innym treściom.
- Okno modalne:wyświetla się nad innymi treściami na ekranie.
Przykład
Do implementowania szuflady nawigacyjnej możesz użyć kompozytu ModalNavigationDrawer
.
Użyj slotu drawerContent
, aby podać ModalDrawerSheet
i treści szuflady, jak w tym przykładzie:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Text("Drawer title", modifier = Modifier.padding(16.dp)) HorizontalDivider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { // Screen content }
ModalNavigationDrawer
może przyjmować kilka dodatkowych parametrów szuflady. Na przykład za pomocą parametru gesturesEnabled
możesz włączyć lub wyłączyć reagowanie szuflady na przeciąganie, jak w tym przykładzie:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Kontrolowanie zachowania
Aby kontrolować sposób otwierania i zamykania szuflady, użyj DrawerState
. Do elementu ModalNavigationDrawer
należy przekazać element DrawerState
za pomocą parametru drawerState
.
DrawerState
zapewnia dostęp do funkcji open
i close
, a także właściwości związanych z obecnym stanem szuflady. Te zawieszające funkcje wymagają obiektu CoroutineScope
, który można utworzyć za pomocą funkcji rememberCoroutineScope
. Funkcję zawieszania możesz też wywołać w reakcji na zdarzenia interfejsu użytkownika.
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 } }
Tworzenie grup w panelu nawigacyjnym
Ten fragment kodu pokazuje, jak utworzyć szczegółowe menu nawigacyjne z sekcjami i separatorami:
@Composable fun DetailedDrawerExample( content: @Composable (PaddingValues) -> Unit ) { val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed) val scope = rememberCoroutineScope() ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Column( modifier = Modifier.padding(horizontal = 16.dp) .verticalScroll(rememberScrollState()) ) { Spacer(Modifier.height(12.dp)) Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge) HorizontalDivider() Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium) NavigationDrawerItem( label = { Text("Item 1") }, selected = false, onClick = { /* Handle click */ } ) NavigationDrawerItem( label = { Text("Item 2") }, selected = false, onClick = { /* Handle click */ } ) HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp)) Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium) NavigationDrawerItem( label = { Text("Settings") }, selected = false, icon = { Icon(Icons.Outlined.Settings, contentDescription = null) }, badge = { Text("20") }, // Placeholder onClick = { /* Handle click */ } ) NavigationDrawerItem( label = { Text("Help and feedback") }, selected = false, icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) }, onClick = { /* Handle click */ }, ) Spacer(Modifier.height(12.dp)) } } }, drawerState = drawerState ) { Scaffold( topBar = { TopAppBar( title = { Text("Navigation Drawer Example") }, navigationIcon = { IconButton(onClick = { scope.launch { if (drawerState.isClosed) { drawerState.open() } else { drawerState.close() } } }) { Icon(Icons.Default.Menu, contentDescription = "Menu") } } ) } ) { innerPadding -> content(innerPadding) } } }
Najważniejsze informacje o kodzie
- Wypełnia element
drawerContent
wartościąColumn
zawierającą sekcje, rozdzielacze i elementy nawigacji. ModalDrawerSheet
zapewnia styl Material Design dla szuflady.HorizontalDivider
oddziela sekcje w szufladzie.ModalNavigationDrawer
tworzy szufladę.drawerContent
określa zawartość szuflady.- Wewnątrz
ModalDrawerSheet
elementColumn
układa elementy szuflady w poziomie. - Komponenty
NavigationDrawerItem
reprezentują poszczególne elementy w szufladzie. Scaffold
zapewnia podstawową strukturę ekranu, w tymTopAppBar
.- Element
navigationIcon
w sekcjiTopAppBar
kontroluje stan otwierania i zamykania szuflady.
Wynik
Na poniższym obrazku widać, jak wygląda otwarta szuflada z sekcjami i elementami:
Dodatkowe materiały
- Material Design: panel nawigacji