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 mostrare 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 composable 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 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(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 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

Lo snippet seguente 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 le sezioni 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