Menu

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

Viene visualizzato un menu a discesa con due opzioni. Un'icona con tre puntini verticali indica che, se fai clic, si apre il menu.
Figura 1. Un menu a discesa di base con due elementi elencati.

Superficie 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 è il trigger per visualizzare o nascondere il menu a discesa.

I parametri chiave per il componente DropdownMenu includono quanto segue:

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

I parametri chiave per DropdownMenuItem includono quanto segue:

  • 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 compresso.
  • Il parametro onDismissRequest definisce un callback che viene eseguito quando l'utente chiude il menu.
  • Il componente DropdownMenuItem rappresenta gli elementi selezionabili nel menu a discesa.
  • Un IconButton attiva l'espansione e la compressione 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 essenziale 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 suoi contenuti supera lo spazio disponibile. Questo codice crea un DropdownMenu scorrevole che mostra 100 elementi segnaposto.
  • Il ciclo forEach genera dinamicamente i composable DropdownMenuItem. Gli elementi non vengono creati in modo differito, il che significa che tutti i 100 elementi del menu a discesa vengono creati ed esistono nella composizione.
  • Il IconButton attiva l'espansione e la compressione di DropdownMenu quando viene selezionato.
  • La 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 produce 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 separatori

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 separatori dividono 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(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 composable DropdownMenuItem, ognuno rappresenta un'azione selezionabile.
  • I composable HorizontalDivider inseriscono una linea orizzontale per separare i gruppi di voci di menu.

Risultato

Lo snippet precedente produce un menu a discesa con icone e separatori:

Un menu a discesa con sezioni per Profilo, Impostazioni, Invia feedback, Informazioni e Guida. Ogni opzione ha un'icona, ad esempio un'icona persona per Profilo.
Figura 4. Un menu a discesa diviso in sezioni con icone iniziali e finali.

Risorse aggiuntive

  • Material Design: Menu