Dialogfeld

Mit der Komponente Dialog werden Dialogfelder oder Nutzereingaben auf einer Ebene über dem Hauptinhalt der App angezeigt. Sie sorgt für eine unterbrechende Benutzeroberfläche, um die Aufmerksamkeit der Nutzer zu gewinnen.

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

  • Bestätigung einer Nutzeraktion, z. B. beim Löschen einer Datei.
  • Anfordern von Nutzereingaben, z. B. in einer To-do-Liste-App.
  • Eine Liste mit Optionen zur Auswahl für den Nutzer präsentieren, z. B. bei der Auswahl eines Landes bei der Profileinrichtung.
Ein Dialogfeld mit Text und Symbolen.
Abbildung 1. Beispiel für ein Dialogfeld mit Text und Symbolen.

Dialogfeld einer Benachrichtigung

Die zusammensetzbare Funktion AlertDialog bietet eine praktische API zum Erstellen eines Dialogfelds mit Material Design-Thema. AlertDialog hat bestimmte Parameter zum Verarbeiten bestimmter Elemente des Dialogfelds. Dazu gehören die folgenden:

  • title: Der Text, der oben im Dialogfeld angezeigt wird.
  • text: Der Text, der zentriert 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 Bestätigungsschaltfläche dient.

Im folgenden Beispiel werden zwei Schaltflächen in einem Benachrichtigungsdialogfeld 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")
            }
        }
    )
}

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
                )
            }
        }
    }
}

Diese Implementierung sieht so aus:

Ein geöffnetes Benachrichtigungsdialogfeld mit den Schaltflächen „Schließen“ und „Bestätigen“.
Abbildung 2: Ein Benachrichtigungsdialogfeld mit Schaltflächen.

Composable für Dialogfelder

Dialog ist eine einfache zusammensetzbare Funktion, die kein Styling oder vordefinierte Slots für Inhalte bietet. Es handelt sich um einen relativ einfachen Container, den Sie mit einem Container wie Card befüllen sollten. Im Folgenden sind einige der wichtigsten Parameter eines Dialogs 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.
angeben.

Einfaches Beispiel

Das folgende Beispiel zeigt eine einfache Implementierung der zusammensetzbaren Funktion Dialog. Als sekundärer Container wird ein Card verwendet. Ohne die Card würde die Text-Komponente 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,
            )
        }
    }
}

So sieht diese Implementierung aus. Wenn das Dialogfeld geöffnet ist, werden die darunter liegenden Hauptinhalte der App abgedunkelt und ausgegraut dargestellt:

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

Erweitertes Beispiel

Im Folgenden finden Sie eine komplexere Implementierung der zusammensetzbaren Funktion Dialog. In diesem Fall implementiert die Komponente manuell eine ähnliche Schnittstelle wie im vorherigen Beispiel AlertDialog.

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

Ein Dialogfeld mit dem Mount Feathertop in Victoria, Australien, mit einer Schaltfläche zum Schließen und einer Schaltfläche zum Bestätigen.
Abbildung 4. Ein Dialogfeld mit einem Bild.

Zusätzliche Ressourcen