Menú de acciones

En Jetpack Compose, un menú de acciones (por ejemplo, el típico menú desplegable que aparece en la parte superior derecha de una AppBar) se puede implementar utilizando un DropdownMenu.

Para implementar un menú de este tipo es necesario:

1. Preparar el estado: es necesario declarar un estado para controlar si el menú está desplegado o no.

2. Agregar botones de acción (IconButton): Normalmente, se usa un IconButton en la TopAppBar para activar el menú.

3. Definir el DropdownMenu: Usa el componente DropdownMenu para mostrar el menú.

4. Agregar los elementos del menú: Usa DropdownMenuItem para los elementos del menú.

Ejemplo completo

import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.material3.ExperimentalMaterial3Api

@Composable
@OptIn(ExperimentalMaterial3Api::class)
fun MenuDeAcciones(navController: NavController) {
    // Estado para controlar la visibilidad del menú
    var expanded by remember { mutableStateOf(false) }

    // Barra de herramientas (TopAppBar)
    TopAppBar(
        title = { Text("Menú de acciones") },
        actions = {
            // Botón de menú
            IconButton(onClick = { expanded = true }) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Menú"
                )
            }

            // Menú desplegable
            DropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                DropdownMenuItem(
                    text = { Text("Home") },
                    onClick = {
                        // Acción 1
                        expanded = false
                        navController.navigate(Screen.Home.route)
                    }
                ) 
                DropdownMenuItem(
                    text = {
                        Text("Back")
                    },
                    onClick = {
                        // Acción 2
                        expanded = false
                        navController.popBackStack()
                    }
                )
                // Línea divisoria entre elementos
                Divider() 
                DropdownMenuItem(
                    text = {
                        Text("Other action")
                    },
                    onClick = {
                        // Simplemente cierra el menú desplegable
                        expanded = false
                    }
                )
            }
        }
    )
}

@Preview
@Composable
fun MenuDeAccionesPreview() {
    MenuDeAcciones(rememberNavController())
}

Explicación del código

1. Estado expanded: Controla si el menú se muestra o no.

2. IconButton: Botón en la esquina superior derecha para abrir el menú.

3. DropdownMenu: Define el menú desplegable y sus elementos.

4. DropdownMenuItem: Representa cada opción del menú.

Personalización adicional

• Íconos en las opciones: Puedes añadir un ícono al lado del texto en cada DropdownMenuItem.

• Colores y estilos: Usa MaterialTheme o aplica estilos personalizados según sea necesario.

Si necesitas algo más específico o quieres combinarlo con otras animaciones o interacciones, ¡puedo ayudarte a extender este ejemplo!