Navigationsleiste

Die Komponente Navigationsleiste ist ein ausziehbares Menü, mit dem Nutzer verschiedene Bereiche Ihrer App aufrufen können. Sie wird durch Wischen von der Seite oder Tippen auf ein Menüsymbol aktiviert.

Sehen Sie sich diese drei Anwendungsfälle für die Implementierung eines Navigationsmenüs an:

• Inhaltsorganisation:Nutzer sollten zwischen verschiedenen Kategorien wechseln können, z. B. in Nachrichten- oder Blogging-Apps.
• Kontoverwaltung:In Apps mit Nutzerkonten müssen Nutzer schnell und einfach auf Kontoeinstellungen und Profilbereiche zugreifen können.
• Funktionssuche:Ordnen Sie mehrere Funktionen und Einstellungen in einem einzigen Menü an, um Nutzern die Suche und den Zugriff in komplexen Apps zu erleichtern.

In 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 angezeigt.

Abbildung 1: Beispiel für eine Navigationsleiste.

Verwendungsbeispiele

Mit dem ModalNavigationDrawer-Element können Sie eine Navigationsleiste implementieren.

Verwenden Sie den drawerContent-Steckplatz, um einen ModalDrawerSheet anzugeben 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
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer akzeptiert eine Reihe zusätzlicher Parameter für die Seitenleiste. 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. Du solltest 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

Gruppen in einer Navigationsleiste erstellen

Im folgenden Snippet wird gezeigt, 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ügt dem drawerContent ein Column mit Abschnitten, Trennlinien und Navigationselementen hinzu.
• ModalDrawerSheet bietet Material Design-Styling für die Leiste.
• HorizontalDivider trennt Bereiche innerhalb der Schublade.
• Mit ModalNavigationDrawer wird die Schublade erstellt.
• drawerContent definiert den Inhalt der Schublade.
• Innerhalb des ModalDrawerSheet ordnet ein Column die Elemente der Schublade vertikal an.
• NavigationDrawerItem-Kompositionen repräsentieren einzelne Elemente im Bereich.
• Die Scaffold bildet die grundlegende Struktur des Bildschirms, einschließlich der TopAppBar.
• Mit der navigationIcon in der TopAppBar wird der Öffnungs- und Schließstatus der Schublade gesteuert.

Ergebnis

Auf der folgenden Abbildung ist zu sehen, wie die Leiste geöffnet aussieht, mit Abschnitten und Elementen:

Abbildung 2. Eine Navigationsleiste mit zwei verschachtelten Gruppen.

Weitere Informationen

• Material Design: Navigationsleiste