Le composant Dialog
affiche des messages pop-up ou demande à l'utilisateur de saisir des informations sur une
au-dessus du contenu principal de l'application. Il crée une expérience d'UI interrompante pour
attirer l'attention
des utilisateurs.
Voici quelques cas d'utilisation d'une boîte de dialogue:
- Confirmation d'une action de l'utilisateur, par exemple lors de la suppression d'un fichier.
- Demander des entrées utilisateur, par exemple dans une application de liste de tâches
- Présenter une liste d'options à la sélection de l'utilisateur, comme choisir un pays dans la configuration d'un profil.
Boîte de dialogue d'alerte
Le composable AlertDialog
fournit une API pratique pour créer un
Boîte de dialogue sur le thème de Material Design. AlertDialog
comporte des paramètres spécifiques pour
en gérant certains éléments de la boîte de dialogue. En voici quelques exemples:
title
: texte qui s'affiche en haut de la boîte de dialogue.text
: texte qui s'affiche au centre de la boîte de dialogue.icon
: graphique qui s'affiche en haut de la boîte de dialogue.onDismissRequest
: fonction appelée lorsque l'utilisateur ferme la boîte de dialogue. par exemple en appuyant à l'extérieur.dismissButton
: composable servant de bouton "Ignorer".confirmButton
: composable servant de bouton de confirmation.
L'exemple suivant implémente deux boutons dans une boîte de dialogue d'alerte, l'un qui ferme la boîte de dialogue et une autre confirme sa demande.
@OptIn(ExperimentalMaterial3Api::class) @Composable fun AlertDialogExample( onDismissRequest: () -> Unit, onConfirmation: () -> Unit, dialogTitle: String, dialogText: String, icon: ImageVector, ) { AlertDialog( icon = { Icon(icon, contentDescription = "Example Icon") }, title = { Text(text = dialogTitle) }, text = { Text(text = dialogText) }, onDismissRequest = { onDismissRequest() }, confirmButton = { TextButton( onClick = { onConfirmation() } ) { Text("Confirm") } }, dismissButton = { TextButton( onClick = { onDismissRequest() } ) { Text("Dismiss") } } ) }
Cette implémentation implique un composable parent qui transmet des arguments au composable enfant de la manière suivante:
@Composable fun DialogExamples() { // ... val openAlertDialog = remember { mutableStateOf(false) } // ... when { // ... openAlertDialog.value -> { AlertDialogExample( onDismissRequest = { openAlertDialog.value = false }, onConfirmation = { openAlertDialog.value = false println("Confirmation registered") // Add logic here to handle confirmation. }, dialogTitle = "Alert dialog example", dialogText = "This is an example of an alert dialog with buttons.", icon = Icons.Default.Info ) } } } }
Cette implémentation est la suivante :
<ph type="x-smartling-placeholder">![Boîte de dialogue d'alerte ouverte avec les boutons "Fermer" et "Confirmer"](https://developer.android.com/static/develop/ui/compose/images/components/dialog-alert.png?authuser=9&hl=fr)
Composable de boîte de dialogue
Dialog
est un composable de base qui ne fournit aucun style ni
des emplacements prédéfinis pour le contenu. Il s'agit d'un conteneur relativement simple
vous devez insérer un conteneur tel que Card
. Voici quelques-unes
Paramètres clés d'une boîte de dialogue:
onDismissRequest
: le lambda appelé lorsque l'utilisateur ferme la boîte de dialogue.properties
: instance deDialogProperties
qui fournit une plus de possibilités de personnalisation.
Exemple de base
L'exemple suivant est une implémentation de base du composable Dialog
. Remarque
qu'il utilise un Card
comme conteneur secondaire. Sans Card
, le Text
apparaissait seul au-dessus du contenu principal de l'application.
@Composable fun MinimalDialog(onDismissRequest: () -> Unit) { Dialog(onDismissRequest = { onDismissRequest() }) { Card( modifier = Modifier .fillMaxWidth() .height(200.dp) .padding(16.dp), shape = RoundedCornerShape(16.dp), ) { Text( text = "This is a minimal dialog", modifier = Modifier .fillMaxSize() .wrapContentSize(Alignment.Center), textAlign = TextAlign.Center, ) } } }
Cette implémentation se présente comme suit. Notez que lorsque la boîte de dialogue est ouverte, le contenu principal de l'application en dessous semble plus sombre et grisé:
<ph type="x-smartling-placeholder">![Boîte de dialogue qui ne contient rien d'autre qu'un libellé.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-minimal.png?authuser=9&hl=fr)
Exemple avancé
Voici une implémentation plus avancée du composable Dialog
. Dans ce
le composant implémente manuellement une interface semblable à AlertDialog
.
dans l'exemple ci-dessus.
@Composable fun DialogWithImage( onDismissRequest: () -> Unit, onConfirmation: () -> Unit, painter: Painter, imageDescription: String, ) { Dialog(onDismissRequest = { onDismissRequest() }) { // Draw a rectangle shape with rounded corners inside the dialog Card( modifier = Modifier .fillMaxWidth() .height(375.dp) .padding(16.dp), shape = RoundedCornerShape(16.dp), ) { Column( modifier = Modifier .fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { Image( painter = painter, contentDescription = imageDescription, contentScale = ContentScale.Fit, modifier = Modifier .height(160.dp) ) Text( text = "This is a dialog with buttons and an image.", modifier = Modifier.padding(16.dp), ) Row( modifier = Modifier .fillMaxWidth(), horizontalArrangement = Arrangement.Center, ) { TextButton( onClick = { onDismissRequest() }, modifier = Modifier.padding(8.dp), ) { Text("Dismiss") } TextButton( onClick = { onConfirmation() }, modifier = Modifier.padding(8.dp), ) { Text("Confirm") } } } } } }
Cette implémentation est la suivante :
<ph type="x-smartling-placeholder">![Boîte de dialogue contenant une photo du mont Feathertop, à Victoria. Sous l'image se trouvent un bouton "Ignorer" et un bouton de confirmation.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-image.png?authuser=9&hl=fr)