Menüs

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

Ein Drop-down-Menü mit zwei Optionen wird angezeigt. Ein Symbol mit drei vertikalen Punkten zeigt an, dass sich durch Klicken darauf das Menü öffnet.
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 Komponenten DropdownMenu und DropdownMenuItem werden verwendet, um die Menüpunkte anzuzeigen, während IconButton der Trigger zum Ein- oder Ausblenden des Drop-down-Menüs ist.

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

  • 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 DropdownMenuItem-Kompositionen enthält.

Die wichtigsten Parameter für DropdownMenuItem sind:

  • text: Definiert den im Menüpunkt angezeigten Inhalt.
  • 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... */ }
            )
        }
    }
}

Wichtige Punkte zum Code

  • Definiert ein einfaches DropdownMenu mit zwei Menüpunkten.
  • 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 Compose-Element DropdownMenuItem stellt auswählbare Elemente im Drop-down-Menü dar.
  • Ein IconButton löst das Maximieren und Minimieren des Menüs aus.

Ergebnis

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

Längeres Drop-down-Menü erstellen

DropdownMenu ist standardmäßig scrollbar, 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... */ }
                )
            }
        }
    }
}

Wichtige Punkte zum Code

  • Die DropdownMenu ist scrollbar, wenn die Gesamthöhe des Inhalts den verfügbaren Platz überschreitet. Mit diesem Code wird ein scrollbares DropdownMenu erstellt, das 100 Platzhalterelemente enthält.
  • 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.
  • Das IconButton löst das Maximieren und Minimieren des DropdownMenu aus, wenn darauf geklickt wird.
  • Mit der Lambda-Funktion onClick in jedem DropdownMenuItem kannst du die Aktion definieren, die ausgeführt wird, wenn der Nutzer einen Menüpunkt auswählt.

Ergebnis

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

Ein Drop-down-Menü mit vielen Optionen, bei dem 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üpunkten führende und nachfolgende Symbole hinzugefügt und Trennlinien trennen Gruppen von Menüpunkten.

@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... */ }
            )
        }
    }
}

Dieser Code definiert ein DropdownMenu innerhalb eines Box.

Wichtige Punkte zum Code

  • Mit den Parametern leadingIcon und trailingIcon werden Symbole am Anfang und Ende eines DropdownMenuItem hinzugefügt.
  • Ein IconButton löst die Maximierung des Menüs aus.
  • Die DropdownMenu enthält mehrere DropdownMenuItem-Kompositionen, die jeweils eine auswählbare Aktion darstellen.
  • Mit HorizontalDivider-Kompositionen 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:

Ein Drop-down-Menü mit den Abschnitten „Profil“, „Einstellungen“, „Feedback geben“, „Info“ und „Hilfe“. Jede Option hat ein Symbol, z. B. ein Personensymbol für „Profil“.
Abbildung 4: Ein Drop-down-Menü, das in Abschnitte mit vor- und nachgestellten Symbolen unterteilt ist.

Zusätzliche Ressourcen