Navigationsleiste

Die Komponente Navigationsleiste ist ein Einblendmenü, über das Nutzer zu verschiedenen Bereichen Ihrer App navigieren können. Nutzer können es aktivieren, indem sie von der Seite wischen oder auf ein Menüsymbol tippen.

Hier sind drei Anwendungsfälle für die Implementierung einer Navigationsleiste:

  • Inhaltsorganisation:Ermögliche Nutzern, zwischen verschiedenen Kategorien zu wechseln, z. B. in Nachrichten- oder Blogging-Apps.
  • Kontoverwaltung:In Apps mit Nutzerkonten können Sie Links zu den Kontoeinstellungen und Profilbereichen bereitstellen.
  • Funktionserkennung:Organisieren Sie mehrere Funktionen und Einstellungen in einem einzigen Menü, damit Nutzer sie in komplexen Apps leichter finden und darauf zugreifen können.

In Material Design gibt es zwei Arten von Navigationsleisten:

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

Beispiel

Mit der komponierbaren Funktion ModalNavigationDrawer kannst du eine Navigationsleiste implementieren.

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

ModalNavigationDrawer akzeptiert eine Reihe zusätzlicher Drawer-Parameter. Sie können beispielsweise mit dem Parameter gesturesEnabled festlegen, ob die Ansicht auf Ziehen reagiert, wie im folgenden Beispiel gezeigt:

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

Verhalten steuern

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

DrawerState bietet Zugriff auf die Funktionen open und close sowie auf Properties, die sich auf den aktuellen Drawer-Status beziehen. Für diese Sperrfunktionen ist ein CoroutineScope erforderlich, das 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
    }
}

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)
        }
    }
}

Wichtige Punkte zum Code

  • Füllt die drawerContent mit einer Column, die Abschnitte, Trennlinien und Navigationselemente enthält.
  • ModalDrawerSheet bietet Material Design-Stile für die Drawer.
  • HorizontalDivider trennt Abschnitte innerhalb der Leiste.
  • ModalNavigationDrawer erstellt die Leiste.
  • drawerContent definiert den Inhalt der Einblendung.
  • Im ModalDrawerSheet-Element werden die Elemente der Seitenleiste mit einem Column-Element vertikal angeordnet.
  • NavigationDrawerItem-Composables stellen einzelne Elemente in der Navigationsleiste dar.
  • Scaffold stellt die grundlegende Struktur des Bildschirms bereit, einschließlich TopAppBar.
  • Der navigationIcon im TopAppBar steuert, ob die Leiste geöffnet oder geschlossen ist.

Ergebnis

Die folgende Abbildung zeigt, wie die Leiste geöffnet wird und welche 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 wird geöffnet.

Zusätzliche Ressourcen