Die Komponente der Navigationsleiste ist ein eingeschobenes Menü, über das Nutzer zu verschiedenen Bereichen Ihrer App wechseln können. Sie können sie aktivieren, indem sie von der Seite wischen 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 Kategorien wechseln, z. B. in Nachrichten- oder Blog-Apps.
- Kontoverwaltung:Stellen Sie in Apps mit Nutzerkonten Quick Links zu Kontoeinstellungen und Profilbereichen bereit.
- Funktionserkennung:Organisieren Sie mehrere Funktionen und Einstellungen in einem einzigen Menü, um Nutzer in komplexen Apps leichter auffindbar zu machen 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
Sie können die zusammensetzbare Funktion ModalNavigationDrawer verwenden, um eine Navigationsleiste zu implementieren.
Verwende den Slot drawerContent, um ein ModalDrawerSheet und den Inhalt der Leiste wie im folgenden Beispiel anzugeben:
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. Sie können beispielsweise mit dem Parameter gesturesEnabled festlegen, ob die Leiste auf Ziehbewegungen reagiert, wie im folgenden Beispiel gezeigt:
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. Übergeben Sie DrawerState mit dem Parameter drawerState an ModalNavigationDrawer.
DrawerState bietet Zugriff auf die Funktionen open und close sowie auf Eigenschaften, die sich auf den aktuellen Status der Leiste beziehen. Diese Sperrungsfunktionen erfordern eine CoroutineScope, die Sie mit rememberCoroutineScope instanziieren können. Sie können die Beendigungsfunktionen auch als Reaktion auf UI-Ereignisse aufrufen.
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
}
}