Menüs

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

Abbildung 1: Ein einfaches Drop-down-Menü mit zwei Elementen.

API-Oberfläche

Verwenden Sie DropdownMenu, DropdownMenuItem und die Komponente IconButton, um ein benutzerdefiniertes Drop-down-Menü zu implementieren. Die Komponenten DropdownMenu und DropdownMenuItem werden verwendet, um die Menüpunkte anzuzeigen, während IconButton der Auslöser ist, um das Drop-down-Menü einzu- oder auszublenden.

Zu den wichtigsten Parametern für die DropdownMenu-Komponente gehören:

• expanded: Gibt an, ob das Menü sichtbar ist.
• onDismissRequest: Wird zum Schließen des Menüs verwendet.
• content: Die zusammensetzbaren Inhalte des Menüs, die in der Regel DropdownMenuItem-Kompositionen enthalten.

Zu den wichtigsten Parametern für DropdownMenuItem gehören:

• text: Hiermit wird der Inhalt des Menüpunkts definiert.
• onClick: Callback zur Verarbeitung der Interaktion mit dem Menüelement.

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

• Hier wird eine einfache DropdownMenu mit zwei Menüpunkten definiert.
• Mit dem Parameter expanded wird festgelegt, ob das Menü maximiert oder minimiert angezeigt wird.
• Der Parameter onDismissRequest definiert einen Callback, der ausgeführt wird, wenn der Nutzer das Menü schließt.
• Das DropdownMenuItem-Element steht für auswählbare Elemente im Drop-down-Menü.
• Ein IconButton maximiert und minimiert das Menü.

Ergebnis

Abbildung 2. Ein minimalistisches Drop-down-Menü mit nur zwei Optionen.

Längeres Drop-down-Menü erstellen

DropdownMenu kann standardmäßig scrollbar sein, wenn nicht alle Menüpunkte gleichzeitig angezeigt werden können. Mit dem folgenden Snippet wird ein längeres, scrollbares Drop-down-Menü erstellt:

@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

• Die DropdownMenu ist scrollbar, wenn die Gesamthöhe der Inhalte den verfügbaren Platz überschreitet. Mit diesem Code wird ein scrollbares DropdownMenu erstellt, in dem 100 Platzhalterelemente angezeigt werden.
• Die forEach-Schleife generiert dynamisch DropdownMenuItem-Kompositionen. Die Elemente werden nicht verzögert erstellt. Das bedeutet, dass alle 100 Drop-down-Elemente erstellt werden und in der Komposition vorhanden sind.
• Wenn Sie auf das IconButton klicken, wird das DropdownMenu maximiert und minimiert.
• Mit dem onClick-Lambda in jedem DropdownMenuItem können Sie die Aktion definieren, die ausgeführt wird, wenn der Nutzer einen Menüpunkt auswählt.

Ergebnis

Das vorherige Code-Snippet führt zum folgenden scrollbaren Menü:

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üpunkten einleitende und abschließende Symbole hinzugefügt und Gruppen von Menüpunkten durch Trennlinien voneinander 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

In diesem Code wird ein DropdownMenu in einem Box definiert.

Wichtige Punkte zum Code

• Mit den Parametern leadingIcon und trailingIcon werden am Anfang und Ende einer DropdownMenuItem Symbole eingefügt.
• Ein IconButton löst die Maximierung des Menüs aus.
• Das DropdownMenu enthält mehrere DropdownMenuItem-Kompositionen, die jeweils eine auswählbare Aktion darstellen.
• Mit HorizontalDivider-Kompositen wird eine horizontale Linie eingefügt, um Gruppen von Menüpunkten zu trennen.

Ergebnis

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

Abbildung 4: Ein Drop-down-Menü, das in Abschnitte mit vorangestellten und nachgestellten Symbolen unterteilt ist.

Weitere Informationen

• Material Design: Menüs