Mit der Komponente Dialog werden Pop-up-Nachrichten angezeigt oder Nutzereingaben auf einer Ebene über dem Hauptinhalt der App angefordert. Sie erzeugt eine störende Benutzeroberfläche,
um die Aufmerksamkeit der Nutzer zu wecken.
Ein Dialogfeld wird unter anderem in folgenden Anwendungsfällen eingesetzt:
- Bestätigung der Nutzeraktion, z. B. beim Löschen einer Datei
- Nutzereingabe anfordern, beispielsweise in einer App für To-do-Listen
- Eine Liste mit Optionen für die Nutzerauswahl wird angezeigt, z. B. die Auswahl eines Landes in einer Profileinrichtung.
Dialogfeld einer Benachrichtigung
Die zusammensetzbare API AlertDialog bietet eine bequeme API zum Erstellen eines Dialogfelds im Material Design-Design. AlertDialog hat bestimmte Parameter für die Verarbeitung bestimmter Elemente des Dialogfelds. Dazu gehören:
title: Der Text, der oben im Dialogfeld angezeigt wird.text: Der Text, der in der Mitte des Dialogfelds angezeigt wird.icon: Die Grafik, die oben im Dialogfeld angezeigt wird.onDismissRequest: Die Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt, z. B. durch Tippen außerhalb des Dialogfelds.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 Dialogfeld für Benachrichtigungen implementiert: eine zum Schließen des Dialogfelds und eine zum Bestätigen der Anfrage.
@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 so an die untergeordnete zusammensetzbare Funktion übergibt:
@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:
Dialogfeld zusammensetzbare Funktionen
Dialog ist eine einfache zusammensetzbare Funktion, die keine Stile oder vordefinierte Slots für Inhalte bietet. Es handelt sich um einen relativ einfachen Container, den Sie mit einem Container wie Card füllen sollten. Im Folgenden sind einige der wichtigsten Parameter eines Dialogfelds aufgeführt:
onDismissRequest: Lambda-Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt.properties: Eine Instanz vonDialogProperties, die zusätzliche Anpassungsmöglichkeiten bietet.
Einfaches Beispiel
Das folgende Beispiel zeigt eine einfache Implementierung der zusammensetzbaren Funktion Dialog. Dabei wird ein Card als sekundärer Container verwendet. Ohne Card würde die Komponente Text allein über den Hauptinhalten 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, wird der Hauptinhalt der App darunter abgedunkelt und ausgegraut dargestellt:
Erweitertes Beispiel
Im Folgenden finden Sie eine erweiterte Implementierung der zusammensetzbaren Funktion Dialog. In diesem Fall implementiert die Komponente manuell eine ähnliche Schnittstelle wie im obigen AlertDialog-Beispiel.
@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:
