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. Une icône à trois points verticaux indique que vous pouvez ouvrir le menu en cliquant dessus.
Figure 1. Menu déroulant de base avec deux éléments.

Surface d'API

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

Voici les principaux paramètres du composant DropdownMenu :

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

Voici les principaux paramètres de DropdownMenuItem :

  • 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 suivant illustre une implémentation DropdownMenu minimale :

@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

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. 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éfilable :

@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

Points clés concernant le code

  • DropdownMenu est défilable lorsque la hauteur totale de son contenu dépasse l'espace disponible. Ce code crée un DropdownMenu défilable 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.
  • IconButton déclenche le développement et le repliement de DropdownMenu lorsqu'il est cliqué.
  • Le lambda onClick dans 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 avec de nombreuses options, nécessitant de faire défiler l'écran pour afficher tous les éléments.
Figure 3. Un long menu déroulant.

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

L'extrait 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... */ }
            )
        }
    }
}
Menus.kt

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.
  • Le 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 précédent produit un menu déroulant avec des icônes et des séparateurs :

Menu déroulant avec les sections "Profil", "Paramètres", "Envoyer des commentaires", "À propos" et "Aide". Chaque option est associée à une icône, comme 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