Menu

Menu umożliwiają użytkownikom kliknięcie ikony, pola tekstowego lub innego elementu, a następnie wybranie opcji z listy na tymczasowej powierzchni. Z tego przewodnika dowiesz się, jak tworzyć zarówno podstawowe menu, jak i bardziej złożone menu z podziałami i ikonami.

Rysunek 1. Podstawowe menu z 2 elementami.

Interfejs API

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

Najważniejsze parametry komponentu DropdownMenu to:

• expanded: wskazuje, czy menu jest widoczne.
• onDismissRequest: służy do obsługi zamykania menu.
• content: kompozytowa treść menu, która zwykle zawiera DropdownMenuItem kompozytowalne elementy.

Najważniejsze 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 ma być widoczne w rozwiniętej czy zwiniętej formie.
• Parametr onDismissRequest definiuje funkcję wywołania zwrotnego, która jest wykonywana, gdy użytkownik zamknie menu.
• Element DropdownMenuItem reprezentuje elementy do wyboru w menu.
• IconButton powoduje rozwinięcie i zwinięcie menu.

Wynik

Rysunek 2. Minimalne menu z 2 opcjami.

Tworzenie dłuższego menu

DropdownMenu jest domyślnie przewijany, jeśli nie można wyświetlić wszystkich elementów menu jednocześnie. Poniższy fragment kodu tworzy dłuższe, przewijalne 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

• Jeśli łączna wysokość zawartości przekracza dostępną wysokość, można przewijać DropdownMenu. Ten kod tworzy przewijany element DropdownMenu, który wyświetla 100 elementów zastępczych.
• Pętla forEach dynamicznie generuje komponenty DropdownMenuItem. Elementy nie są tworzone w sposób leniwy, co oznacza, że wszystkie 100 elementów na liście są tworzone i występują w kompozycji.
• Po kliknięciu IconButton DropdownMenu powoduje rozwinięcie i zwinięcie.
• Lambda onClick w każdym elemencie DropdownMenuItem umożliwia zdefiniowanie działania wykonywanego, gdy użytkownik wybierze element menu.

Wynik

Powyższy fragment kodu tworzy takie menu, które można przewijać:

Rysunek 3. Długie, przewijane menu.

Tworzenie dłuższego menu z odstępami

Poniższy fragment kodu pokazuje bardziej zaawansowane wdrożenie menu. W tym fragmencie kodu do elementów menu dodane są ikony wiodące i zakończone, a przedziałki oddzielają grupy elementów menu.

@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 DropdownMenuItem.
• IconButton powoduje rozwinięcie menu.
• Element DropdownMenu zawiera kilka elementów DropdownMenuItem, z których każdy reprezentuje jedno z dostępnych działań.
• HorizontalDivider komponenty wstawiają poziomą linię, aby oddzielić grupy pozycji menu.

Wynik

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

Rysunek 4. Menu podzielone na sekcje z ikonami na początku i na końcu.

Dodatkowe materiały

• Material Design: Menu