Navigationsleiste

Die Komponente Navigationsleiste ist ein ausziehbares Menü, mit dem Nutzer verschiedene Bereiche Ihrer App aufrufen können. Sie wird aktiviert, indem Nutzer 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.
• Funktionssuche:Ordnen Sie mehrere Funktionen und Einstellungen in einem einzigen Menü an, um Nutzern die Suche und den Zugriff in komplexen Apps zu erleichtern.

Im Material Design gibt es zwei Arten von Navigationsleisten:

• Standard:Der Bereich auf dem Bildschirm wird mit anderen Inhalten geteilt.
• Modal:Wird über anderen Inhalten auf einem Bildschirm eingeblendet.

Verwendungsbeispiele

Mit dem ModalNavigationDrawer-Element können Sie eine Navigationsleiste 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))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer akzeptiert eine Reihe zusätzlicher Drawer-Parameter. 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 Schublade geöffnet und geschlossen wird. Sie sollten DrawerState mit dem Parameter drawerState an ModalNavigationDrawer übergeben.

DrawerState bietet Zugriff auf die Funktionen open und close sowie auf Properties, die sich auf den aktuellen Schiebereglerstatus beziehen. Für diese Funktionen ist ein CoroutineScope erforderlich, das Sie mit rememberCoroutineScope instanziieren können. Sie können die Funktionen zum Pausieren 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
    }
}
MaterialLayoutSnippets.kt