Komponent Panel nawigacji to wysuwane menu, które pozwala użytkownikom przechodzić do różnych sekcji aplikacji. Można go aktywować, przesuwając palcem z boku lub klikając ikonę menu.
Rozważ zastosowanie tych 3 przypadków użycia panelu nawigacji:
- Organizacja treści: pozwól użytkownikom przełączać się między różnymi kategoriami, np. w aplikacjach z wiadomościami lub blogami.
- Zarządzanie kontem: umożliwiaj szybkie linki do ustawień konta i sekcji profili w aplikacjach z kontami użytkowników.
- Odkrywanie funkcji: uporządkuj wiele funkcji i ustawień w jednym menu, aby ułatwić użytkownikom znajdowanie złożonych aplikacji i korzystanie z nich.
Material Design ma 2 rodzaje szuflad nawigacji:
- Standardowe: współdziel miejsce na ekranie z innymi treściami.
- Modal: wyświetla się nad innymi treściami na ekranie.
Przykład
Aby zaimplementować panel nawigacji, możesz użyć funkcji ModalNavigationDrawer
kompozycyjnej.
W boksie drawerContent
podaj element ModalDrawerSheet
i podaj zawartość panelu, jak w tym przykładzie:
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 }
Funkcja ModalNavigationDrawer
akceptuje szereg dodatkowych parametrów panelu. Możesz na przykład za pomocą parametru gesturesEnabled
określić, czy panel reaguje na przeciągnięcia, jak w tym przykładzie:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Działanie elementu sterującego
Aby określić sposób otwierania i zamykania panelu, użyj DrawerState
. Przekazuj żądanie DrawerState
do ModalNavigationDrawer
za pomocą parametru drawerState
.
DrawerState
zapewnia dostęp do funkcji open
i close
, a także do właściwości związanych z bieżącym stanem panelu. Te funkcje zawieszania wymagają elementu CoroutineScope
, którego instancję można utworzyć za pomocą rememberCoroutineScope
. Możesz też wywoływać funkcje zawieszania w odpowiedzi na zdarzenia interfejsu.
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 } }