Le composant Dialog
affiche des messages pop-up ou demande une entrée utilisateur sur une couche au-dessus du contenu principal de l'application. Elle crée une expérience d'interface utilisateur gênante pour capter l'attention des utilisateurs.
Voici quelques cas d'utilisation d'une boîte de dialogue:
- Confirmation de l'action de l'utilisateur, par exemple 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 de sélection par l'utilisateur, comme le choix d'un pays dans la configuration d'un profil
Boîte de dialogue d'alerte
Le composable AlertDialog
fournit une API pratique pour créer une boîte de dialogue sur le thème de Material Design. AlertDialog
comporte des paramètres spécifiques pour gérer des éléments particuliers de la boîte de dialogue. En voici quelques-uns:
title
: texte affiché en haut de la boîte de dialogue.text
: texte centré dans la boîte de dialogue.icon
: image 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 de celle-ci.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 pour la fermer et l'autre pour confirmer sa requête.
@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 :
Composable de boîte de dialogue
Dialog
est un composable de base qui ne fournit aucun style ni emplacement prédéfini pour le contenu. Il s'agit d'un conteneur relativement simple que vous devez remplir avec un conteneur tel que Card
. Voici quelques-uns des paramètres clés d'une boîte de dialogue:
onDismissRequest
: lambda appelé lorsque l'utilisateur ferme la boîte de dialogue.properties
: instance deDialogProperties
offrant des possibilités de personnalisation supplémentaires.
Exemple de base
L'exemple suivant est une implémentation de base du composable Dialog
. Notez qu'il utilise un Card
comme conteneur secondaire. Sans Card
, le composant Text
apparaîtra 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 est la suivante. Notez que lorsque la boîte de dialogue est ouverte, le contenu principal de l'application en dessous est sombre et grisé:
Exemple avancé
Voici une implémentation plus avancée du composable Dialog
. Dans ce cas, le composant implémente manuellement une interface semblable à l'exemple AlertDialog
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 :