Menus

Les menus déroulants permettent aux utilisateurs de cliquer sur une icône, un champ de texte ou un autre composant, puis de sélectionner une option dans une liste sur une surface temporaire. Ce guide explique comment créer des menus de base et des menus plus complexes avec des séparateurs et des icônes.

Menu déroulant avec deux options affichées. Une icône avec trois points verticaux indique que cliquer dessus ouvre le menu.
Figure 1. Menu déroulant de base avec deux éléments listés.

Surface d'API

Utilisez les composants DropdownMenu, DropdownMenuItem et IconButton pour implémenter un menu déroulant personnalisé. Les composants DropdownMenu et DropdownMenuItem permettent d'afficher les éléments de menu, tandis que IconButton sert de déclencheur pour afficher ou masquer le menu déroulant.

Les principaux paramètres du composant DropdownMenu sont les suivants :

  • expanded : indique si le menu est visible.
  • onDismissRequest : permet de gérer la fermeture du menu.
  • content : contenu composable du menu, contenant généralement des composables DropdownMenuItem.

Les paramètres clés de DropdownMenuItem sont les suivants :

  • text : définit le contenu affiché dans l'élément de menu.
  • onClick : rappel pour gérer l'interaction avec l'élément du menu.

Créer un menu déroulant de base

L'extrait de code suivant illustre une implémentation minimale de 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... */ }
            )
        }
    }
}

Points clés concernant le code

  • Définit un DropdownMenu de base contenant deux éléments de menu.
  • Le paramètre expanded contrôle la visibilité du menu (développé ou réduit).
  • Le paramètre onDismissRequest définit un rappel qui s'exécute lorsque l'utilisateur ferme le menu.
  • Le composable DropdownMenuItem représente les éléments sélectionnables dans le menu déroulant.
  • Un IconButton déclenche le développement et la réduction du menu.

Résultat

Menu déroulant déclenché par une icône à trois points verticaux. Le menu affiche deux options sélectionnables : Option 1 et Option 2.
Figure 2. Un menu déroulant minimaliste avec seulement deux options.

Créer un menu déroulant plus long

DropdownMenu est défilable par défaut si tous les éléments de menu ne peuvent pas être affichés en même temps. L'extrait de code suivant crée un menu déroulant plus long et déroulant :

@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... */ }
                )
            }
        }
    }
}

Points clés concernant le code

  • Le DropdownMenu est défilable lorsque la hauteur totale de son contenu dépasse l'espace disponible. Ce code crée un DropdownMenu à défilement qui affiche 100 éléments d'espace réservé.
  • La boucle forEach génère dynamiquement des composables DropdownMenuItem. Les éléments ne sont pas créés de manière différée, ce qui signifie que les 100 éléments du menu déroulant sont créés et existent dans la composition.
  • Le IconButton déclenche le développement et la réduction du DropdownMenu lorsque l'utilisateur clique dessus.
  • Le lambda onClick de chaque DropdownMenuItem vous permet de définir l'action effectuée lorsque l'utilisateur sélectionne un élément de menu.

Résultat

L'extrait de code précédent produit le menu déroulant suivant :

Menu déroulant comportant de nombreuses options, nécessitant de faire défiler l'écran pour toutes les afficher.
Figure 3. Un long menu déroulant à faire défiler.

Créer un menu déroulant plus long avec des séparateurs

L'extrait de code suivant montre une implémentation plus avancée d'un menu déroulant. Dans cet extrait, des icônes de début et de fin sont ajoutées aux éléments de menu, et des séparateurs séparent les groupes d'éléments de 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... */ }
            )
        }
    }
}

Ce code définit un DropdownMenu dans un Box.

Points clés concernant le code

  • Les paramètres leadingIcon et trailingIcon ajoutent des icônes au début et à la fin d'un DropdownMenuItem.
  • Un IconButton déclenche le développement du menu.
  • DropdownMenu contient plusieurs composables DropdownMenuItem, chacun représentant une action sélectionnable.
  • Les composables HorizontalDivider insèrent une ligne horizontale pour séparer les groupes d'éléments de menu.

Résultat

L'extrait de code précédent produit un menu déroulant avec des icônes et des séparateurs :

Menu déroulant avec des sections pour le profil, les paramètres, l'envoi de commentaires, les informations et l'aide. Chaque option est associée à une icône, par exemple une icône représentant une personne pour "Profil".
Figure 4. Menu déroulant divisé en sections avec des icônes de début et de fin.

Ressources supplémentaires

  • Material Design : Menus