Mit der Komponente Dialog
werden Pop-up-Nachrichten oder Nutzereingaben auf einem
über dem Hauptinhalt der App liegt. Sie schafft eine störende Benutzeroberfläche,
die Aufmerksamkeit der Nutzenden zu erregen.
Ein Dialogfeld kann unter anderem in folgenden Fällen eingesetzt werden:
- Bestätigung der Nutzeraktion, z. B. das Löschen einer Datei.
- Nutzereingabe anfordern, z. B. in einer To-do-Listen-App
- Eine Liste mit Optionen für die Nutzerauswahl wird angezeigt, z. B. die Auswahl eines Landes in eine Profileinrichtung.
Dialogfeld einer Benachrichtigung
Die zusammensetzbare Funktion AlertDialog
bietet eine praktische API zum Erstellen eines
Dialogfeld mit Material Design-Thema. AlertDialog
hat bestimmte Parameter für
mit bestimmten Elementen des Dialogfelds. Dazu gehören:
title
: Der Text, der oben im Dialogfeld angezeigt wird.text
: Der Text, der im Dialogfeld zentriert angezeigt wird.icon
: Die Grafik, die oben im Dialogfeld angezeigt wird.onDismissRequest
: Die Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt. indem Sie außerhalb davon tippen.dismissButton
: Eine zusammensetzbare Funktion, die als Schaltfläche zum Schließen dient.confirmButton
: Eine zusammensetzbare Funktion, die als Bestätigungsschaltfläche dient.
Im folgenden Beispiel werden zwei Schaltflächen in einem Benachrichtigungsdialogfeld implementiert, schließt das Dialogfeld und ein weiteres, das die Anfrage bestätigt.
@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") } } ) }
Diese Implementierung impliziert eine übergeordnete zusammensetzbare Funktion, die Argumente an die der untergeordneten Elemente auf folgende Weise zusammensetzbar ist:
@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 ) } } } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">![Ein Dialogfeld zum Öffnen von Benachrichtigungen mit einer Schaltfläche zum Schließen und Bestätigen.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-alert.png?authuser=9&hl=de)
Dialog zusammensetzbar
Dialog
ist eine einfache zusammensetzbare Funktion, die weder Stile noch
vordefinierte Anzeigenflächen für Inhalte. Es handelt sich um einen relativ einfachen Container,
sollten Sie einen Container wie Card
verwenden. Im Folgenden finden Sie einige
die wichtigsten Parameter eines Dialogfelds:
onDismissRequest
: Die Lambda-Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt.properties
: Eine Instanz vonDialogProperties
, die einige Anpassungsmöglichkeiten.
Einfaches Beispiel
Das folgende Beispiel zeigt eine einfache Implementierung der zusammensetzbaren Funktion Dialog
. Hinweis
dass er Card
als sekundären Container verwendet. Ohne Card
würde das Text
-Komponente alleine über dem Hauptinhalt der App angezeigt werden.
@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, ) } } }
Diese Implementierung sieht so aus: Wenn das Dialogfeld geöffnet ist, Der Inhalt der App darunter wird abgedunkelt und ausgegraut dargestellt:
<ph type="x-smartling-placeholder">![Ein Dialogfeld, das ausschließlich ein Label enthält.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-minimal.png?authuser=9&hl=de)
Erweitertes Beispiel
Im Folgenden finden Sie eine erweiterte Implementierung der zusammensetzbaren Funktion Dialog
. In dieser
implementiert die Komponente manuell eine ähnliche Schnittstelle wie die AlertDialog
Beispiel oben.
@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") } } } } } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">![Ein Dialogfeld mit einem Foto von Mount Feathertop, Victoria. Unter dem Bild befinden sich eine Schaltfläche zum Schließen und eine Schaltfläche zum Bestätigen.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-image.png?authuser=9&hl=de)