Boîte de dialogue

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.

Figure 1. Exemple de boîte de dialogue contenant du texte et des icônes.

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")
            }
        }
    )
}
Dialog.kt

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
                )
            }
        }
    }
}
Dialog.kt

Cette implémentation est la suivante :

Figure 2. Boîte de dialogue d'alerte avec des boutons

Remarque :Lorsque l'utilisateur clique sur l'un des boutons, la boîte de dialogue se ferme. Lorsque l'utilisateur clique sur "Confirmer", il appelle une fonction qui gère également la confirmation. Dans dans cet exemple, ces fonctions sont onDismissRequest() et onConfirmRequest().

Remarque :Si votre boîte de dialogue nécessite un ensemble de boutons plus complexe, vous pouvez à utiliser le composable Dialog et à le renseigner de façon plus libre. manière.

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 de DialogProperties qui fournit une plus de possibilités de personnalisation.

Attention :Contrairement à l'exemple de AlertDialog de la section précédente, vous devez pour spécifier manuellement la taille et la forme de Dialog. Vous devez également fournir une conteneur interne.

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,
            )
        }
    }
}
Dialog.kt

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

Figure 3. Boîte de dialogue minimale.

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.

Attention :Si vous avez seulement besoin d'afficher une boîte de dialogue à deux boutons, comme dans cet exemple, vous doit utiliser AlertDialog et une API plus pratique. Toutefois, si vous souhaitez créer une boîte de dialogue plus complexe, peut-être avec des formulaires et plusieurs boutons, doit utiliser Dialog avec du contenu personnalisé, comme dans l'exemple suivant.

@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")
                    }
                }
            }
        }
    }
}
Dialog.kt

Cette implémentation est la suivante :

Figure 4. Boîte de dialogue qui inclut une image.

Ressources supplémentaires

• Documentation sur les interfaces utilisateur Material