Меню

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

A Раскрывающееся меню с двумя отображаемыми опциями. Значок с тремя вертикальными точками означает, что при нажатии на него открывается меню.
Рисунок 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. Раскрывающееся меню, разделенное на разделы с ведущими и конечными значками.

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

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