Komponent panelu nawigacji to wysuwane menu, które umożliwia użytkownikom poruszanie się do różnych sekcji aplikacji. Użytkownicy mogą je aktywować, przesuwając palcem z boku lub kliknij ikonę menu.
Oto 3 przypadki użycia szuflady nawigacyjnej:
- 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: w aplikacjach z kontami użytkowników udostępnij szybkie linki do ustawień konta i sekcji profilu.
- Odkrywanie funkcji: uporządkuj wiele funkcji i ustawień w jednym w celu ułatwienia wykrywania użytkowników i uzyskiwania do nich dostępu w złożonych aplikacjach.
W stylu Material Design dostępne są 2 rodzaje szuflad nawigacji:
- Standardowy: udostępnianie miejsca 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
.
Wykorzystaj przedział drawerContent
, aby udostępnić element ModalDrawerSheet
i podać
zawartość panelu, 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 }
Funkcja ModalNavigationDrawer
może przyjmować szereg dodatkowych parametrów panelu. Dla:
możesz na przykład włączyć lub wyłączyć reagowanie panelu na przeciągnięcia za pomocą
gesturesEnabled
jak w tym przykładzie:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Sposób działania
Aby kontrolować sposób otwierania i zamykania szuflady, użyj skrótu 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. Zawieszanie
funkcje wymagają CoroutineScope
, którego wystąpienia można utworzyć za pomocą
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 } }