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.
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ępniaj szybkie linki do ustawień konta i sekcji profilu.
- 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 podać zawartość 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 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. Te funkcje zawieszania 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
}
}