Die Komponente der Navigationsleiste ist ein eingeschobenes Menü, mit dem Nutzer zwischen für verschiedene Bereiche Ihrer App. Nutzer können sie durch Wischen von der Seite aktivieren. oder auf ein Menüsymbol tippen.
Betrachten Sie diese drei Anwendungsfälle für die Implementierung einer Navigationsleiste:
- Organisation von Inhalten:Nutzer können zwischen verschiedenen etwa in Nachrichten- oder Blog-Apps.
- Kontoverwaltung:Direktlinks zu den Kontoeinstellungen und dem Profil hinzufügen Bereiche in Apps mit Nutzerkonten.
- Funktion entdecken:Mehrere Funktionen und Einstellungen an einem Ort um Nutzer in komplexen Apps leichter zu finden und darauf zuzugreifen.
In Material Design gibt es zwei Arten von Navigationsleisten:
- Standard:Sie können den Bildschirmbereich mit anderen Inhalten teilen.
- Modal:Wird über anderen Inhalten auf einem Bildschirm eingeblendet.
Beispiel
Mit der zusammensetzbaren Funktion ModalNavigationDrawer
können Sie ein
Navigationsleiste.
Verwenden Sie den Slot drawerContent
, um ModalDrawerSheet
und
Inhalt der Leiste wie im folgenden Beispiel:
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 }
ModalNavigationDrawer
akzeptiert eine Reihe von zusätzlichen Drawer-Parametern. Für
Sie können beispielsweise festlegen, ob die Leiste mit der Funktion
gesturesEnabled
wie im folgenden Beispiel:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Verhalten der Steuerelemente
Mit DrawerState
können Sie festlegen, wie die Leiste geöffnet und geschlossen wird. Sie sollten
DrawerState
über drawerState
an ModalNavigationDrawer
übergeben
.
DrawerState
bietet Zugriff auf die Funktionen open
und close
wie folgt:
sowie Eigenschaften, die sich auf den aktuellen Status der Leiste beziehen. Diese vorübergehenden
Für Funktionen ist ein CoroutineScope
erforderlich, das Sie mit
rememberCoroutineScope
Sie können die Unterbrechungsfunktionen auch in
auf UI-Ereignisse.
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 } }