Finestra di dialogo

Il componente Dialog mostra messaggi in finestre di dialogo o richiede l'input dell'utente in un livello sopra i contenuti principali dell'app. Interrompe temporaneamente l'interazione nell'interfaccia per attirare l'attenzione dell'utente.

Di seguito sono riportati alcuni casi d'uso delle finestre di dialogo:

Per chiedere conferma dell'azione dell'utente, ad esempio l'eliminazione di un file.
Per richiedere l'input dell'utente, ad esempio in un'app di elenchi di cose da fare.
Per mostrare un elenco di opzioni da far selezionare all'utente, ad esempio per la selezione del paese durante la configurazione del profilo.

Una finestra di dialogo compilata con testo e icone. — **Figura 1.** Esempio di una finestra di dialogo compilata con testo e icone.

Finestra di avviso

Il composable AlertDialog fornisce un'API pratica per creare una finestra di dialogo con tema Material Design. AlertDialog include parametri specifici per gestire determinati elementi della finestra di dialogo. Tra questi, ci sono:

title: il testo visualizzato nella parte superiore della finestra di dialogo.
text: il testo visualizzato al centro della finestra di dialogo.
icon: l'immagine che viene visualizzata nella parte superiore della finestra di dialogo.
onDismissRequest: la funzione chiamata quando l'utente chiude la finestra di dialogo, ad esempio toccando al di fuori della finestra.
dismissButton: un composable che funge da pulsante di chiusura.
confirmButton: un composable che funge da pulsante di conferma.

Il seguente esempio implementa due pulsanti in una finestra di avviso, uno che chiude la finestra di dialogo e un altro che conferma la richiesta.

@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

Questa implementazione implica un composable principale che passa gli argomenti al composable secondario in questo modo:

@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

Ecco come appare l'implementazione:

Una finestra di avviso aperta con un pulsante di chiusura e uno di conferma. — **Figura 2.** Una finestra di avviso con pulsanti.

Finestra di dialogo composable

Dialog è un composable di base che non fornisce nessuno stile o slot predefinito per i contenuti. Si tratta di un contenitore relativamente semplice che devi compilare con un contenitore come Card. Di seguito sono riportati alcuni dei parametri chiave di una finestra di dialogo:

onDismissRequest: la funzione Lambda chiamata quando l'utente chiude la finestra di dialogo.
properties: un'istanza di DialogProperties che fornisce un ambito aggiuntivo per la personalizzazione.

Esempio di base

L'esempio seguente è un'implementazione di base del composable Dialog. Tieni presente che utilizza Card come contenitore secondario. Senza Card, il componente Text verrebbe visualizzato da solo sopra i contenuti principali dell'app.

@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

Ecco come appare l'implementazione: Tieni presente che quando la finestra di dialogo è aperta, i contenuti principali dell'app sottostanti appaiono oscurati e non selezionabili:

Una finestra di dialogo che contiene solo un'etichetta. — **Figura 3.** Finestra di dialogo essenziale.

Esempio avanzato

Di seguito è riportata un'implementazione più avanzata del composable Dialog. In questo caso, il componente implementa manualmente un'interfaccia simile all'esempio AlertDialog riportato sopra.

@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