Die Komponente der Navigationsleiste ist ein eingeschobenes Menü, über das Nutzer zu verschiedenen Bereichen Ihrer App navigieren 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:
- Inhaltsorganisation:Nutzer können zwischen verschiedenen Kategorien wechseln, z. B. in Nachrichten- oder Blogging-Apps.
- Kontoverwaltung:Stellen Sie Direktlinks zu Kontoeinstellungen und Profilbereichen in Apps mit Nutzerkonten bereit.
- Funktionserkennung:Sie können mehrere Funktionen und Einstellungen in einem einzigen Menü zusammenfassen, um die Auffindbarkeit und den Zugriff für Nutzer auf komplexe Apps zu erleichtern.
In Material Design gibt es zwei Arten von Navigationsleisten:
- Standard:Damit wird ein Bereich auf einem Bildschirm mit anderen Inhalten geteilt.
- Modal:Wird über anderen Inhalten auf dem Bildschirm eingeblendet.
Beispiel
Mit der zusammensetzbaren Funktion ModalNavigationDrawer können Sie eine Navigationsleiste implementieren.
Verwende die drawerContent-Fläche, um ein ModalDrawerSheet und den Inhalt der Leiste bereitzustellen, wie im folgenden Beispiel gezeigt:
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
}
Für ModalNavigationDrawer sind weitere Parameter für die Leiste zulässig. So können Sie 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
}
Steuerungsverhalten
Mit DrawerState können Sie steuern, 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 im aktuellen Zustand der Leiste. Diese Aussetzenfunktionen erfordern eine CoroutineScope, die Sie mit rememberCoroutineScope instanziieren können. Sie können die Sperrfunktionen 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
}
}