Menús

Los menús desplegables permiten que los usuarios hagan clic en un ícono, un campo de texto o algún otro componente y, luego, seleccionen una opción de una lista en una superficie temporal. En esta guía, se describe cómo crear menús básicos y menús más complejos con divisores e íconos.

Se muestra un menú desplegable con dos opciones. Un ícono con tres puntos verticales indica que, si haces clic en él, se abrirá el menú.
Figura 1: Un menú desplegable básico con dos elementos en la lista.

Superficie de la API

Usa los componentes DropdownMenu, DropdownMenuItem y IconButton para implementar un menú desplegable personalizado. Los componentes DropdownMenu y DropdownMenuItem se usan para mostrar los elementos del menú, mientras que IconButton es el activador para mostrar u ocultar el menú desplegable.

Los parámetros clave del componente DropdownMenu incluyen los siguientes:

  • expanded: Indica si el menú es visible.
  • onDismissRequest: Se usa para controlar el cierre del menú.
  • content: Es el contenido componible del menú, que suele contener elementos DropdownMenuItem componibles.

Los parámetros clave de DropdownMenuItem incluyen los siguientes:

  • text: Define el contenido que se muestra en el elemento de menú.
  • onClick: Es la devolución de llamada para controlar la interacción con el elemento del menú.

Cómo crear un menú desplegable básico

En el siguiente fragmento, se muestra una implementación mínima de 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

Puntos clave sobre el código

  • Define un DropdownMenu básico que contiene dos elementos de menú.
  • El parámetro expanded controla la visibilidad del menú como expandido o contraído.
  • El parámetro onDismissRequest define una devolución de llamada que se ejecuta cuando el usuario cierra el menú.
  • El elemento componible DropdownMenuItem representa elementos seleccionables en el menú desplegable.
  • Un IconButton activa la expansión y el colapso del menú.

Resultado

Un menú desplegable que se activa con un ícono con tres puntos verticales. El menú muestra dos opciones seleccionables: Opción 1 y Opción 2.
Figura 2: Un menú desplegable minimalista con solo dos opciones.

Cómo crear un menú desplegable más largo

DropdownMenu se puede desplazar de forma predeterminada si no se pueden mostrar todos los elementos del menú a la vez. En el siguiente fragmento, se crea un menú desplegable más largo y desplazable:

@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

Puntos clave sobre el código

  • El DropdownMenu se puede desplazar cuando la altura total de su contenido supera el espacio disponible. Este código crea un DropdownMenu desplazable que muestra 100 elementos de marcador de posición.
  • El bucle forEach genera de forma dinámica elementos DropdownMenuItem componibles. Los elementos no se crean de forma diferida, lo que significa que los 100 elementos del menú desplegable se crean y existen en la composición.
  • El IconButton activa la expansión y la contracción del DropdownMenu cuando se hace clic en él.
  • La expresión lambda onClick dentro de cada DropdownMenuItem te permite definir la acción que se realiza cuando el usuario selecciona un elemento del menú.

Resultado

El fragmento de código anterior produce el siguiente menú desplazable:

Un menú desplegable con muchas opciones, que requiere desplazamiento para ver todos los elementos.
Figura 3: Un menú desplegable largo con barra de desplazamiento.

Crea un menú desplegable más largo con divisores

En el siguiente fragmento, se muestra una implementación más avanzada de un menú desplegable. En este fragmento, se agregan íconos iniciales y finales a los elementos de menú, y los divisores separan los grupos de elementos de menú.

@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

Este código define un DropdownMenu dentro de un Box.

Puntos clave sobre el código

  • Los parámetros leadingIcon y trailingIcon agregan íconos al principio y al final de un DropdownMenuItem.
  • Un IconButton activa la expansión del menú.
  • El elemento DropdownMenu contiene varios elementos DropdownMenuItem componibles, cada uno de los cuales representa una acción seleccionable.
  • Los elementos componibles HorizontalDivider insertan una línea horizontal para separar grupos de elementos de menú.

Resultado

El fragmento anterior produce un menú desplegable con íconos y divisores:

Un menú desplegable con secciones para Perfil, Configuración, Enviar comentarios, Acerca de y Ayuda. Cada opción tiene un ícono, como el de una persona para Perfil.
Figura 4: Un menú desplegable dividido en secciones con íconos iniciales y finales.

Recursos adicionales