Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
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.
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
composable 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:
@ComposablefunMinimalDropdownMenu(){varexpandedbyremember{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... */})}}}
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
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:
@ComposablefunLongBasicDropdownMenu(){varexpandedbyremember{mutableStateOf(false)}// Placeholder list of 100 strings for demonstrationvalmenuItemData=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... */})}}}}
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:
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.
@ComposablefunDropdownMenuWithDetails(){varexpandedbyremember{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 sectionDropdownMenuItem(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 sectionDropdownMenuItem(text={Text("Send Feedback")},leadingIcon={Icon(Icons.Outlined.Feedback,contentDescription=null)},trailingIcon={Icon(Icons.AutoMirrored.Outlined.Send,contentDescription=null)},onClick={/* Do something... */})HorizontalDivider()// Third sectionDropdownMenuItem(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... */})}}}
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-08-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-08-27 UTC."],[],[],null,["Drop-down menus let users click an icon, text field, or other component, and\nthen select from a list of options on a temporary surface. This guide describes\nhow to create both basic menus and more complex menus with dividers and icons.\n**Figure 1.** A basic drop-down menu with two items listed.\n\nAPI surface\n\nUse [`DropdownMenu`](/reference/kotlin/androidx/compose/material3/package-summary#DropdownMenu(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.unit.DpOffset,androidx.compose.foundation.ScrollState,androidx.compose.ui.window.PopupProperties,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.BorderStroke,kotlin.Function1)), [`DropdownMenuItem`](/reference/kotlin/androidx/compose/material3/package-summary#DropdownMenuItem(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.MenuItemColors,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)), and the [`IconButton`](/reference/kotlin/androidx/compose/material3/package-summary#IconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.IconButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,kotlin.Function0))\ncomponents to implement a custom drop-down menu. The `DropdownMenu` and\n`DropdownMenuItem` components are used to display the menu items, while the\n`IconButton` is the trigger to display or hide the drop-down menu.\n\nThe key parameters for the `DropdownMenu` component include the following:\n\n- `expanded`: Indicates whether the menu is visible.\n- `onDismissRequest`: Used to handle menu dismissal.\n- `content`: The composable content of the menu, typically containing `DropdownMenuItem` composables.\n\nThe key parameters for `DropdownMenuItem` include the following:\n\n- `text`: Defines the content displayed in the menu item.\n- `onClick`: Callback to handle interaction with the item in the menu.\n\nCreate a basic drop-down menu\n\nThe following snippet demonstrates a minimal `DropdownMenu` implementation:\n\n\n```kotlin\n@Composable\nfun MinimalDropdownMenu() {\n var expanded by remember { mutableStateOf(false) }\n Box(\n modifier = Modifier\n .padding(16.dp)\n ) {\n IconButton(onClick = { expanded = !expanded }) {\n Icon(Icons.Default.MoreVert, contentDescription = \"More options\")\n }\n DropdownMenu(\n expanded = expanded,\n onDismissRequest = { expanded = false }\n ) {\n DropdownMenuItem(\n text = { Text(\"Option 1\") },\n onClick = { /* Do something... */ }\n )\n DropdownMenuItem(\n text = { Text(\"Option 2\") },\n onClick = { /* Do something... */ }\n )\n }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt#L98-L122\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- Defines a basic `DropdownMenu` containing two menu items.\n- The `expanded` parameter controls the menu's visibility as expanded or collapsed.\n- The `onDismissRequest` parameter defines a callback that executes when the user closes the menu.\n- The `DropdownMenuItem` composable represents selectable items in the drop-down menu.\n- An `IconButton` triggers the expansion and collapse of the menu.\n\nResult **Figure 2.** A minimal drop-down menu with only two options.\n\nCreate a longer drop-down menu\n\n`DropdownMenu` is scrollable by default if all the menu items can't be displayed\nat once. The following snippet creates a longer, scrollable drop-down menu:\n\n\n```kotlin\n@Composable\nfun LongBasicDropdownMenu() {\n var expanded by remember { mutableStateOf(false) }\n // Placeholder list of 100 strings for demonstration\n val menuItemData = List(100) { \"Option ${it + 1}\" }\n\n Box(\n modifier = Modifier\n .padding(16.dp)\n ) {\n IconButton(onClick = { expanded = !expanded }) {\n Icon(Icons.Default.MoreVert, contentDescription = \"More options\")\n }\n DropdownMenu(\n expanded = expanded,\n onDismissRequest = { expanded = false }\n ) {\n menuItemData.forEach { option -\u003e\n DropdownMenuItem(\n text = { Text(option) },\n onClick = { /* Do something... */ }\n )\n }\n }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt#L132-L157\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- The `DropdownMenu` is scrollable when the total height of its content exceeds the available space. This code creates a scrollable `DropdownMenu` that displays 100 placeholder items.\n- The `forEach` loop dynamically generates `DropdownMenuItem` composables. The items are not lazily created, which means that all 100 drop-down items are created and exist in the composition.\n- The `IconButton` triggers the expansion and collapse of the `DropdownMenu` when clicked.\n- The `onClick` lambda within each `DropdownMenuItem` lets you define the action performed when the user selects a menu item.\n\nResult\n\nThe preceding code snippet produces the following scrollable menu:\n**Figure 3.** A long, scrollable drop-down menu.\n\nCreate a longer drop-down menu with dividers\n\nThe following snippet shows a more advanced implementation of a drop-down menu.\nIn this snippet, leading and trailing icons are added to menu items, and\ndividers separate groups of menu items.\n\n\n```kotlin\n@Composable\nfun DropdownMenuWithDetails() {\n var expanded by remember { mutableStateOf(false) }\n\n Box(\n modifier = Modifier\n .fillMaxWidth()\n .padding(16.dp)\n ) {\n IconButton(onClick = { expanded = !expanded }) {\n Icon(Icons.Default.MoreVert, contentDescription = \"More options\")\n }\n DropdownMenu(\n expanded = expanded,\n onDismissRequest = { expanded = false }\n ) {\n // First section\n DropdownMenuItem(\n text = { Text(\"Profile\") },\n leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n DropdownMenuItem(\n text = { Text(\"Settings\") },\n leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n\n HorizontalDivider()\n\n // Second section\n DropdownMenuItem(\n text = { Text(\"Send Feedback\") },\n leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },\n trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n\n HorizontalDivider()\n\n // Third section\n DropdownMenuItem(\n text = { Text(\"About\") },\n leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n DropdownMenuItem(\n text = { Text(\"Help\") },\n leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },\n trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },\n onClick = { /* Do something... */ }\n )\n }\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt#L167-L221\n```\n\n\u003cbr /\u003e\n\nThis code defines a `DropdownMenu` within a `Box`.\n\nKey points about the code\n\n- The `leadingIcon` and `trailingIcon` parameters add icons to the start and end of a `DropdownMenuItem`.\n- An `IconButton` triggers the menu's expansion.\n- The `DropdownMenu` contains several `DropdownMenuItem` composables, each representing a selectable action.\n- [`HorizontalDivider`](/reference/kotlin/androidx/compose/material3/package-summary#HorizontalDivider(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color)) composables insert a horizontal line to separate groups of menu items.\n\nResult\n\nThe preceding snippet produces a drop-down menu with icons and dividers:\n**Figure 4.** A drop-down menu divided into sections with leading and trailing icons.\n\nAdditional resources\n\n- Material Design: [Menus](https://m3.material.io/components/menus)"]]