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.

Un menu a discesa con due opzioni visualizzate. Un'icona con tre puntini verticali indica che facendo clic si apre il menu.
Figura 1. Un menu a discesa di base con due elementi elencati.

API surface

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 composabiliDropdownMenuItem.

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.

Creare 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(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

Punti chiave del codice

  • Definisce un DropdownMenu di base contenente due voci di menu.
  • Il parametro expanded controlla la visibilità del menu come espanso o chiuso.
  • 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 il collasso del menu.

Risultato

Un menu a discesa attivato da un'icona con tre puntini verticali. Il menu mostra due opzioni selezionabili, Opzione 1 e Opzione 2.
Figura 2. Un menu a discesa minimalista con solo due opzioni.

Creare un menu a discesa più lungo

DropdownMenu è scorrevole per impostazione predefinita se non è possibile visualizzare tutti gli elementi del menu contemporaneamente. Il seguente snippet crea un menu a discesa scorrevole più lungo:

@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

Punti chiave del codice

  • DropdownMenu è scorrevole quando l'altezza totale dei relativi contenuti supera lo spazio disponibile. Questo codice crea un DropdownMenu scorrevole che mostra 100 elementi segnaposto.
  • Il loop forEach genera dinamicamente composabili DropdownMenuItem. Gli elementi non vengono creati in modo lazy, il che significa che tutti e 100 gli elementi del menu a discesa vengono creati ed esistono nella composizione.
  • Il IconButton attiva l'espansione e la chiusura del 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 un elemento del menu.

Risultato

Lo snippet di codice precedente genera il seguente menu scorrevole:

Un menu a discesa con molte opzioni, che richiede lo scorrimento per visualizzare tutti gli elementi.
Figura 3. Un menu a discesa lungo e scorrevole.

Creare un menu a discesa più lungo con 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 del menu e i separatori separano i gruppi di voci del menu.

@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

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

Punti chiave del 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 composabili DropdownMenuItem, ciascuno rappresentante un'azione selezionabile.
  • I composabili HorizontalDivider inseriscono una linea orizzontale per separare i gruppi di voci del menu.

Risultato

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

Un menu a discesa con sezioni per Profilo, Impostazioni, Invia feedback, Informazioni e
Figura 4. Un menu a discesa suddiviso in sezioni con icone iniziali e finali.

Risorse aggiuntive

  • Material Design: menu