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.

Un menu déroulant avec deux options affichées. Une icône avec trois points verticaux indique que vous pouvez ouvrir le menu en cliquant dessus.
Figure 1. Menu déroulant de base avec deux éléments affichés.

Surface de l'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: permet de gérer la fermeture du menu.
  • content: contenu composable du menu, qui contient 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 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... */ }
            )
        }
    }
}
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 le rétrécissement 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 à faire défiler 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 à faire défiler:

@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 à faire défiler lorsque la hauteur totale de son contenu dépasse l'espace disponible. Ce code crée un DropdownMenu à faire défiler 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 paresseuse, ce qui signifie que les 100 éléments de liste déroulante sont créés et existent dans la composition.
  • Le IconButton déclenche le développement et le repliage du DropdownMenu lorsqu'il est cliqué.
  • 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 génère le menu à faire défiler 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 à 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 de code, 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.
  • 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 génère 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
Figure 4. Menu déroulant divisé en sections avec des icônes au début et à la fin.

Ressources supplémentaires