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:

• 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
}
MaterialLayoutSnippets.kt

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
}
MaterialLayoutSnippets.kt

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
    }
}
MaterialLayoutSnippets.kt