Меню

Выпадающие меню позволяют пользователям щелкать по значку, текстовому полю или другому компоненту, а затем выбирать из списка параметров на временной поверхности. В этом руководстве описано, как создавать как простые меню, так и более сложные меню с разделителями и значками.

Отображается выпадающее меню с двумя вариантами. Значок с тремя вертикальными точками указывает на то, что нажатие на него открывает меню.
Рисунок 1. Простое выпадающее меню с двумя пунктами.

Поверхность API

Используйте компоненты DropdownMenu , DropdownMenuItem и IconButton для реализации пользовательского выпадающего меню. Компоненты DropdownMenu и DropdownMenuItem используются для отображения пунктов меню, а IconButton — для отображения или скрытия выпадающего меню.

Ключевые параметры компонента DropdownMenu включают следующее:

  • expanded : Указывает, отображается ли меню.
  • onDismissRequest : Используется для обработки закрытия меню.
  • content : Составляемое содержимое меню, обычно содержащее элементы DropdownMenuItem .

Ключевые параметры для DropdownMenuItem включают следующее:

  • text : Определяет содержимое, отображаемое в пункте меню.
  • onClick : Функция обратного вызова для обработки взаимодействия с пунктом меню.

Создайте простое выпадающее меню.

Следующий фрагмент кода демонстрирует минимальную реализацию 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

Основные моменты, касающиеся кода.

  • Определяет базовое DropdownMenu содержащее два пункта меню.
  • Параметр expanded управляет видимостью меню: развернутое или свернутое.
  • Параметр onDismissRequest определяет функцию обратного вызова, которая выполняется, когда пользователь закрывает меню.
  • Компонент DropdownMenuItem представляет собой выбираемые элементы в выпадающем меню.
  • Кнопка IconButton запускает развертывание и сворачивание меню.

Результат

Выпадающее меню, активируемое значком с тремя вертикальными точками. Меню отображает два варианта выбора: Вариант 1 и Вариант 2.
Рисунок 2. Минималистичное выпадающее меню всего с двумя вариантами.

Создайте более длинное выпадающее меню

Если все пункты меню не отображаются одновременно, DropdownMenu по умолчанию прокручивается. Следующий фрагмент кода создает более длинное прокручиваемое выпадающее меню: 

@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

Основные моменты, касающиеся кода.

  • DropdownMenu становится прокручиваемым, когда общая высота его содержимого превышает доступное пространство. Этот код создает прокручиваемое DropdownMenu , отображающее 100 элементов-заполнителей.
  • Цикл forEach динамически генерирует составные элементы DropdownMenuItem . Элементы не создаются отложенно, это означает, что все 100 элементов выпадающего списка создаются и присутствуют в композиции.
  • IconButton при нажатии активирует разворачивание и сворачивание DropdownMenu .
  • Лямбда-функция onClick внутри каждого элемента DropdownMenuItem позволяет определить действие, выполняемое при выборе пользователем пункта меню.

Результат

Приведенный выше фрагмент кода создает следующее прокручиваемое меню:

Выпадающее меню с множеством опций, для просмотра всех пунктов которого требуется прокрутка.
Рисунок 3. Длинное прокручиваемое выпадающее меню.

Создайте более длинное выпадающее меню с разделителями.

В следующем фрагменте кода показана более сложная реализация выпадающего меню. В этом фрагменте к пунктам меню добавлены значки в начале и конце списка, а также разделители, отделяющие группы пунктов меню. 

@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

Этот код определяет DropdownMenu внутри Box .

Основные моменты, касающиеся кода.

  • Параметры leadingIcon и trailingIcon добавляют значки в начало и конец элемента DropdownMenuItem .
  • Кнопка IconButton запускает развертывание меню.
  • DropdownMenu содержит несколько составных элементов DropdownMenuItem , каждый из которых представляет собой выбираемое действие.
  • Компонент HorizontalDivider вставляет горизонтальную линию для разделения групп пунктов меню.

Результат

Приведенный выше фрагмент кода создает выпадающее меню со значками и разделителями:

Выпадающее меню с разделами «Профиль», «Настройки», «Отправить отзыв», «О программе» и «Справка». Каждый пункт имеет значок, например, значок человека для раздела «Профиль».
Рисунок 4. Выпадающее меню, разделенное на разделы с иконками в начале и в конце.

Дополнительные ресурсы

  • Материальный дизайн: Меню