Dialogfeld

Die Dialog Komponente zeigt Dialogmeldungen an oder fordert Nutzereingaben auf einer Ebene über dem Hauptinhalt der App an. Sie sorgt für eine unterbrechende UI-Erfahrung, um die Aufmerksamkeit des Nutzers zu gewinnen.

Zu den Anwendungsfällen für einen Dialog gehören:

Bestätigung einer Nutzeraktion, z. B. beim Löschen einer Datei
Anforderung von Nutzereingaben, z. B. in einer To-do-Listen-App
Präsentation einer Liste von Optionen zur Auswahl durch den Nutzer, z. B. Auswahl eines Landes bei der Profileinrichtung

Ein Dialogfeld mit Text und Symbolen. — **Abbildung 1.** Beispiel für einen Dialog mit Text und Symbolen

Dialogfeld einer Benachrichtigung

Die AlertDialog zusammensetzbare Funktion bietet eine praktische API zum Erstellen eines Dialogfelds mit Material Design-Thema. AlertDialog hat spezifische 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 mittig im Dialogfeld 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 Schaltfläche zum Bestätigen dient

Im folgenden Beispiel werden zwei Schaltflächen in einem Dialogfeld einer Benachrichtigung implementiert: eine zum Schließen des Dialogfelds und eine zum Bestätigen der Anfrage.

@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

Diese Implementierung setzt eine übergeordnete zusammensetzbare Funktion voraus, die Argumente auf diese Weise 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
                )
            }
        }
    }
}Dialog.kt

Diese Implementierung sieht so aus:

Ein geöffnetes Benachrichtigungsdialogfeld mit den Schaltflächen „Schließen“ und „Bestätigen“. — **Abbildung 2** Dialogfeld einer Benachrichtigung mit Schaltflächen

Zusammensetzbare Funktion „Dialog“

Dialog ist eine einfache zusammensetzbare Funktion, die keine Formatierung oder vordefinierten 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: Die Lambda-Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt
properties: Eine Instanz von DialogProperties, die zusätzlichen Spielraum für Anpassungen bietet

Einfaches Beispiel

Das folgende Beispiel ist eine einfache Implementierung der zusammensetzbaren Funktion Dialog. Dabei wird Card als sekundärer Container verwendet. Ohne Card würde die Komponente Text allein über dem Hauptinhalt der App angezeigt.

@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

Diese Implementierung sieht so aus. Wenn das Dialogfeld geöffnet ist, wird der Hauptinhalt der App darunter abgedunkelt und ausgegraut:

Ein Dialogfeld, das nur ein Label enthält. — **Abbildung 3** Minimaler Dialog

Erweitertes Beispiel

Im Folgenden finden Sie eine erweiterte Implementierung der zusammensetzbaren Funktion Dialog. In diesem Fall implementiert die Komponente manuell eine ähnliche Oberfläche wie das Beispiel für AlertDialog 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")
                    }
                }
            }
        }
    }
}Dialog.kt