Menu

Menu rozwijane umożliwiają użytkownikom kliknięcie ikony, pola tekstowego lub innego komponentu, a następnie wybranie opcji z listy w tymczasowym interfejsie. Z tego przewodnika dowiesz się, jak tworzyć zarówno podstawowe, jak i bardziej złożone menu z separatorami i ikonami.

Wyświetli się menu z 2 opcjami. Ikona z 3 pionowymi kropkami oznacza, że kliknięcie jej otwiera menu.
Rysunek 1. Podstawowe menu z 2 pozycjami.

Powierzchnia interfejsu API

Użyj komponentów DropdownMenu, DropdownMenuItem i IconButton, aby wdrożyć niestandardowe menu. Komponenty DropdownMenu i DropdownMenuItem służą do wyświetlania elementów menu, a IconButton jest wyzwalaczem wyświetlania lub ukrywania menu rozwijanego.

Kluczowe parametry komponentu DropdownMenu to:

  • expanded: określa, czy menu jest widoczne.
  • onDismissRequest: służy do zamykania menu.
  • content: treść menu, która zwykle zawiera komponenty DropdownMenuItem.

Kluczowe parametry DropdownMenuItem to:

  • text: określa zawartość wyświetlaną w pozycji menu.
  • onClick: wywołanie zwrotne do obsługi interakcji z elementem w menu.

Tworzenie podstawowego menu

Poniższy fragment kodu pokazuje minimalną implementację DropdownMenu:

@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

Najważniejsze informacje o kodzie

  • Definiuje podstawowy element DropdownMenu zawierający 2 pozycje menu.
  • Parametr expanded określa, czy menu jest rozwinięte czy zwinięte.
  • Parametr onDismissRequest definiuje wywołanie zwrotne, które jest wykonywane, gdy użytkownik zamknie menu.
  • Komponent DropdownMenuItem reprezentuje elementy, które można wybrać w menu.
  • IconButton powoduje rozwinięcie i zwinięcie menu.

Wynik

Menu rozwijane wywoływane przez ikonę z 3 pionowymi kropkami. W menu wyświetlają się 2 opcje do wyboru: Opcja 1 i Opcja 2.
Rysunek 2. Minimalistyczne menu z tylko 2 opcjami.

Tworzenie dłuższego menu

DropdownMenu można przewijać domyślnie, jeśli nie wszystkie elementy menu mogą być wyświetlane jednocześnie. Poniższy fragment kodu tworzy dłuższe, przewijane menu:

@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

Najważniejsze informacje o kodzie

  • Element DropdownMenu można przewijać, gdy łączna wysokość jego zawartości przekracza dostępną przestrzeń. Ten kod tworzy przewijany element DropdownMenu z 100 elementami zastępczymi.
  • Pętla forEach dynamicznie generuje funkcje kompozycyjne DropdownMenuItem. Elementy nie są tworzone leniwie, co oznacza, że wszystkie 100 elementów menu jest tworzonych i istnieje w kompozycji.
  • Kliknięcie elementu IconButton powoduje rozwinięcie i zwinięcie elementu DropdownMenu.
  • Symbol onClick lambda w każdym DropdownMenuItem umożliwia zdefiniowanie działania, które ma być wykonywane, gdy użytkownik wybierze element menu.

Wynik

Powyższy fragment kodu generuje to przewijane menu:

Menu z wieloma opcjami, które wymagają przewijania, aby wyświetlić wszystkie elementy.
Rysunek 3. Długie menu rozwijane z możliwością przewijania.

Tworzenie dłuższego menu z separatorami

Poniższy fragment kodu pokazuje bardziej zaawansowane wdrożenie menu. W tym fragmencie do pozycji menu dodano ikony na początku i na końcu, a grupy pozycji menu są oddzielone separatorami.

@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

Ten kod definiuje element DropdownMenu w ramach elementu Box.

Najważniejsze informacje o kodzie

  • Parametry leadingIcon i trailingIcon dodają ikony na początku i na końcu elementu DropdownMenuItem.
  • IconButton powoduje rozwinięcie menu.
  • Element DropdownMenu zawiera kilka funkcji kompozycyjnych DropdownMenuItem, z których każda reprezentuje działanie, które można wybrać.
  • Komponenty HorizontalDivider wstawiają linię poziomą, aby oddzielić grupy pozycji menu.

Wynik

Powyższy fragment kodu generuje menu z ikonami i separatorami:

Menu z sekcjami Profil, Ustawienia, Prześlij opinię, Informacje i Pomoc. Każda opcja ma ikonę, np. ikona osoby w przypadku Profilu.
Rysunek 4. Menu z podziałem na sekcje z ikonami na początku i na końcu.

Dodatkowe materiały

  • Material Design: Menu