Menu

I menu a discesa consentono agli utenti di fare clic su un'icona, un campo di testo o un altro componente e poi di selezionare un'opzione da un elenco su una superficie temporanea. Questa guida descrive come creare menu di base e menu più complessi con divisori e icone.

Figura 1. Un menu a discesa di base con due elementi elencati.

Piattaforma API

Utilizza i componenti DropdownMenu, DropdownMenuItem e IconButton per implementare un menu a discesa personalizzato. I componenti DropdownMenu e DropdownMenuItem vengono utilizzati per visualizzare le voci di menu, mentre IconButton è l'attivatore per visualizzare o nascondere il menu a discesa.

I parametri chiave per il componente DropdownMenu includono:

• expanded: indica se il menu è visibile.
• onDismissRequest: utilizzato per gestire la chiusura del menu.
• content: i contenuti componibili del menu, che in genere contengono componibili DropdownMenuItem.

I parametri chiave per DropdownMenuItem includono:

• text: definisce i contenuti visualizzati nella voce di menu.
• onClick: callback per gestire l'interazione con l'elemento nel menu.

Crea un menu a discesa di base

Il seguente snippet mostra un'implementazione minima di DropdownMenu:

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(painter = rememberVectorPainter(AppIcons.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

Punti chiave sul codice

• Definisce un DropdownMenu di base contenente due voci di menu.
• Il parametro expanded controlla la visibilità del menu come espanso o compresso.
• Il parametro onDismissRequest definisce un callback che viene eseguito quando l'utente chiude il menu.
• Il componibile DropdownMenuItem rappresenta gli elementi selezionabili nel menu a discesa.
• Un IconButton attiva l'espansione e la compressione del menu.

Risultato

Figura 2. Un menu a discesa minimale con solo due opzioni.

Crea un menu a discesa più lungo

Per impostazione predefinita, DropdownMenu è scorrevole se non è possibile visualizzare tutte le voci di menu contemporaneamente. Il seguente snippet crea un menu a discesa più lungo e scorrevole:

@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(painter = rememberVectorPainter(AppIcons.MoreVert), contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}
Menus.kt

Punti chiave sul codice

• DropdownMenu è scorrevole quando l'altezza totale dei suoi contenuti supera lo spazio disponibile. Questo codice crea un DropdownMenu scorrevole che mostra 100 elementi segnaposto.
• Il ciclo forEach genera dinamicamente i componibili DropdownMenuItem. Gli elementi non vengono creati in modalità lazy, il che significa che tutti i 100 elementi del menu a discesa vengono creati ed esistono nella composizione.
• IconButton attiva l'espansione e la compressione di DropdownMenu quando viene fatto clic.
• La funzione lambda onClick all'interno di ogni DropdownMenuItem ti consente di definire l'azione eseguita quando l'utente seleziona una voce di menu.

Risultato

Lo snippet di codice precedente genera il seguente menu scorrevole:

Figura 3. Un menu a discesa lungo e scorrevole.

Crea un menu a discesa più lungo con i divisori

Il seguente snippet mostra un'implementazione più avanzata di un menu a discesa. In questo snippet, le icone iniziali e finali vengono aggiunte alle voci di menu e i divisori separano i gruppi di voci di menu.

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(painter = rememberVectorPainter(AppIcons.MoreVert), contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Person), contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Settings), contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Second section
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Feedback), contentDescription = null) },
                trailingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Send), contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Info), contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Help), contentDescription = null) },
                trailingIcon = { Icon(painter = rememberVectorPainter(AppIcons.OpenInNew), contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

Questo codice definisce un DropdownMenu all'interno di un Box.

Punti chiave sul codice

• I parametri leadingIcon e trailingIcon aggiungono icone all'inizio e alla fine di un DropdownMenuItem.
• Un IconButton attiva l'espansione del menu.
• DropdownMenu contiene diversi componibili DropdownMenuItem, ognuno dei quali rappresenta un'azione selezionabile.
• I componibili HorizontalDivider inseriscono una linea orizzontale per separare i gruppi di voci di menu.

Risultato

Lo snippet precedente genera un menu a discesa con icone e divisori:

Figura 4. Un menu a discesa diviso in sezioni con icone iniziali e finali.

Risorse aggiuntive

• Material Design: menu