Navigationsleiste

Die Komponente Navigationsleiste ist ein Einblendmenü, über das Nutzer zu verschiedenen Bereichen Ihrer App navigieren können. Sie können es durch Wischen von der Seite oder durch Tippen auf ein Menüsymbol aktivieren.

Hier sind drei Anwendungsfälle für die Implementierung eines Navigationsbereichs:

  • Inhalte organisieren:Ermöglichen Sie Nutzern, zwischen verschiedenen Kategorien zu wechseln, z. B. in Nachrichten- oder Blogging-Apps.
  • Kontoverwaltung:Bietet Schnellzugriff auf Kontoeinstellungen und Profilbereiche in Apps mit Nutzerkonten.
  • Funktionen leichter finden:Organisieren Sie mehrere Funktionen und Einstellungen in einem einzigen Menü, um Nutzern die Suche und den Zugriff in komplexen Apps zu erleichtern.

In Material Design gibt es zwei Arten von Navigationsleisten:

  • Standard:Sie teilen sich den Platz auf dem Bildschirm mit anderen Inhalten.
  • Modal:Wird über anderen Inhalten auf einem Bildschirm angezeigt.
Beispiel für eine Navigationsleiste im Material Design 3 im hellen und dunklen Modus
Abbildung 1: Beispiel für ein Navigationsmenü

Beispiel

Mit der ModalNavigationDrawer-Composable können Sie eine Navigationsleiste implementieren.

Verwenden Sie den Slot drawerContent, um ein ModalDrawerSheet anzugeben, und geben Sie den Inhalt der Schublade an, 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

ModalNavigationDrawer akzeptiert eine Reihe zusätzlicher Parameter für die Seitenleiste. Sie können beispielsweise mit dem Parameter gesturesEnabled festlegen, ob die Schublade auf Ziehen reagiert. Beispiel:

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

Verhalten steuern

Mit DrawerState können Sie steuern, wie die Leiste geöffnet und geschlossen wird. Sie sollten einen DrawerState an ModalNavigationDrawer übergeben. Verwenden Sie dazu den Parameter drawerState.

DrawerState bietet Zugriff auf die Funktionen open und close sowie auf Attribute, die sich auf den aktuellen Status der Seitenleiste beziehen. Für diese Funktionen zum Sperren ist ein CoroutineScope erforderlich, das Sie mit rememberCoroutineScope instanziieren können. Sie können die unterbrechenden Funktionen 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

Gruppen in einer Navigationsleiste erstellen

Das folgende Snippet zeigt, wie Sie eine detaillierte Navigationsleiste mit Abschnitten und Trennlinien erstellen:

@Composable
fun DetailedDrawerExample(
    content: @Composable (PaddingValues) -> Unit
) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerContent = {
            ModalDrawerSheet {
                Column(
                    modifier = Modifier.padding(horizontal = 16.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Spacer(Modifier.height(12.dp))
                    Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
                    HorizontalDivider()

                    Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Item 1") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Item 2") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )

                    HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))

                    Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Settings") },
                        selected = false,
                        icon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                        badge = { Text("20") }, // Placeholder
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Help and feedback") },
                        selected = false,
                        icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                        onClick = { /* Handle click */ },
                    )
                    Spacer(Modifier.height(12.dp))
                }
            }
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Navigation Drawer Example") },
                    navigationIcon = {
                        IconButton(onClick = {
                            scope.launch {
                                if (drawerState.isClosed) {
                                    drawerState.open()
                                } else {
                                    drawerState.close()
                                }
                            }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { innerPadding ->
            content(innerPadding)
        }
    }
}
NavigationDrawer.kt

Wichtige Punkte zum Code

  • Füllt drawerContent mit einem Column-Objekt, das Abschnitte, Trennzeichen und Navigationselemente enthält.
  • ModalDrawerSheet bietet Material Design-Stile für die Seitenleiste.
  • Mit HorizontalDivider werden Abschnitte im Drawer voneinander getrennt.
  • Mit ModalNavigationDrawer wird die Schublade erstellt.
  • drawerContent definiert den Inhalt des Bereichs.
  • Innerhalb von ModalDrawerSheet wird mit Column die vertikale Anordnung der Drawer-Elemente festgelegt.
  • NavigationDrawerItem-Composables stellen einzelne Elemente in der Navigationsleiste dar.
  • Das Scaffold bietet die grundlegende Struktur des Bildschirms, einschließlich des TopAppBar.
  • Mit dem navigationIcon im TopAppBar wird der Öffnungs- und Schließstatus der Schublade gesteuert.

Ergebnis

Die folgende Abbildung zeigt, wie die Seitenleiste aussieht, wenn sie geöffnet ist und Abschnitte und Elemente angezeigt werden:

Eine detaillierte Navigationsleiste mit zwei Abschnitten, die jeweils mehrere beschriftete Elemente und Symbole enthalten.
Abbildung 2. Eine Navigationsleiste mit zwei verschachtelten Gruppen.

Zusätzliche Ressourcen