Menüs

Über Drop-down-Menüs können Nutzer auf ein Symbol, ein Textfeld oder eine andere Komponente klicken und dann auf einer temporären Oberfläche eine Option aus einer Liste auswählen. In diesem Leitfaden wird beschrieben, wie Sie sowohl einfache als auch komplexere Menüs mit Trennlinien und Symbolen erstellen.

Ein Dropdown-Menü mit zwei Optionen wird angezeigt. Ein Symbol mit drei vertikalen Punkten zeigt an, dass durch Klicken darauf das Menü geöffnet wird.
Abbildung 1. Ein einfaches Drop-down-Menü mit zwei Elementen.

API-Oberfläche

Verwenden Sie die Komponenten DropdownMenu, DropdownMenuItem und IconButton, um ein benutzerdefiniertes Drop-down-Menü zu implementieren. Die DropdownMenu und DropdownMenuItem Komponenten werden verwendet, um die Menüelemente anzuzeigen, während das IconButton das Drop-down-Menü ein- oder ausblendet.

Die wichtigsten Parameter für die Komponente DropdownMenu sind:

  • expanded: Gibt an, ob das Menü sichtbar ist.
  • onDismissRequest: Wird verwendet, um das Schließen des Menüs zu verarbeiten.
  • content: Der zusammensetzbare Inhalt des Menüs, der in der Regel zusammensetzbare DropdownMenuItem-Elemente enthält.

Die wichtigsten Parameter für DropdownMenuItem sind:

  • text: Definiert den Inhalt, der im Menüelement angezeigt wird.
  • onClick: Callback zur Verarbeitung der Interaktion mit dem Element im Menü.

Einfaches Drop-down-Menü erstellen

Das folgende Snippet zeigt eine minimale DropdownMenu-Implementierung:

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

Wichtige Punkte zum Code

  • Definiert ein einfaches DropdownMenu mit zwei Menüelementen.
  • Der Parameter expanded steuert, ob das Menü ein- oder ausgeblendet ist.
  • Der Parameter onDismissRequest definiert einen Callback, der ausgeführt wird, wenn der Nutzer das Menü schließt.
  • Das zusammensetzbare Element DropdownMenuItem stellt auswählbare Elemente im Drop-down-Menü dar.
  • Ein IconButton blendet das Menü ein und aus.

Ergebnis

Ein Drop-down-Menü, das durch ein Symbol mit drei vertikalen Punkten aufgerufen wird. Das Menü enthält zwei auswählbare Optionen: Option 1 und Option 2.
Abbildung 2. Ein einfaches Drop-down-Menü mit nur zwei Optionen.

Längeres Drop-down-Menü erstellen

DropdownMenu ist standardmäßig scrollbar, wenn nicht alle Menüelemente gleichzeitig angezeigt werden können. Das folgende Snippet erstellt ein längeres, scrollbares Drop-down-Menü:

@Composable
fun LongBasicDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    // Placeholder list of 100 strings for demonstration
    val menuItemData = List(100) { "Option ${it + 1}" }

    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}
Menus.kt

Wichtige Punkte zum Code

  • DropdownMenu ist scrollbar, wenn die Gesamthöhe des Inhalts den verfügbaren Platz übersteigt. Dieser Code erstellt ein scrollbares DropdownMenu mit 100 Platzhalterelementen.
  • Die forEach-Schleife generiert dynamisch zusammensetzbare DropdownMenuItem-Elemente. Die Elemente werden nicht verzögert erstellt. Das bedeutet, dass alle 100 Drop-down-Elemente erstellt werden und in der Komposition vorhanden sind.
  • Durch Klicken auf IconButton wird das DropdownMenu ein- und ausgeblendet.
  • Mit der onClick-Lambda-Funktion in jedem DropdownMenuItem können Sie die Aktion definieren, die ausgeführt wird, wenn der Nutzer ein Menüelement auswählt.

Ergebnis

Das obige Code-Snippet erzeugt das folgende scrollbare Menü:

Ein Drop-down-Menü mit vielen Optionen, für das gescrollt werden muss, um alle Elemente zu sehen.
Abbildung 3. Ein langes, scrollbares Drop-down-Menü.

Längeres Drop-down-Menü mit Trennlinien erstellen

Das folgende Snippet zeigt eine erweiterte Implementierung eines Drop-down-Menüs. In diesem Snippet werden Menüelementen führende und nachfolgende Symbole hinzugefügt und Gruppen von Menüelementen durch Trennlinien getrennt.

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Second section
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

Dieser Code definiert ein DropdownMenu in einem Box-Element.

Wichtige Punkte zum Code

  • Mit den Parametern leadingIcon und trailingIcon werden Symbole am Anfang und Ende eines DropdownMenuItem hinzugefügt.
  • Ein IconButton blendet das Menü ein.
  • Das DropdownMenu enthält mehrere zusammensetzbare DropdownMenuItem-Elemente, die jeweils eine auswählbare Aktion darstellen.
  • HorizontalDivider Zusammensetzbare Elemente fügen eine horizontale Linie ein, um Gruppen von Menüelementen zu trennen.

Ergebnis

Das obige Snippet erzeugt ein Drop-down-Menü mit Symbolen und Trennlinien:

Ein Drop-down-Menü mit Abschnitten für „Profil“, „Einstellungen“, „Feedback geben“, „Über“ und „Hilfe“. Jede Option hat ein Symbol, z. B. ein Personensymbol für „Profil“.
Abbildung 4. Ein Drop-down-Menü, das in Abschnitte unterteilt ist und führende und nachfolgende Symbole enthält.

Zusätzliche Ressourcen