Navigationsleiste

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:

• Inhaltsorganisation: Ermöglichen Sie Nutzern, zwischen verschiedenen Kategorien zu wechseln, z. B. in Nachrichten- oder Blogging-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))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

Für ModalNavigationDrawer sind eine Reihe zusätzlicher Parameter für Auszüge zulässig. So können Sie beispielsweise mit dem Parameter gesturesEnabled festlegen, ob die Schublade auf Ziehen reagiert oder nicht, wie im folgenden Beispiel:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

Verhalten steuern

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 sowie auf Properties, die sich auf den aktuellen Schiebereglerstatus beziehen. Diese 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
    }
}
MaterialLayoutSnippets.kt