Dialogfeld

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.
<ph type="x-smartling-placeholder">
</ph> 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 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")
            }
        }
    )
}
Dialog.kt

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

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> Ein Dialogfeld zum Öffnen von Benachrichtigungen mit einer Schaltfläche zum Schließen und Bestätigen.
Abbildung 2: Ein Benachrichtigungsdialogfeld mit Schaltflächen.

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

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">
</ph> Ein Dialogfeld, das ausschließlich ein Label enthält.
Abbildung 3: Kurzes Dialogfenster.

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

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> 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.
Abbildung 4: Ein Dialogfeld mit einem Bild.

Weitere Informationen