Finestra di dialogo

Il componente Dialog visualizza messaggi popup o richiede l'input dell'utente su un livello sopra i contenuti principali dell'app. Crea un'esperienza UI invasiva attirare l'attenzione degli utenti.

Ecco alcuni casi d'uso per le finestre di dialogo:

  • Confermare l'azione dell'utente, ad esempio l'eliminazione di un file.
  • Richiesta di input dell'utente, ad esempio in un'app per l'elenco di cose da fare.
  • Viene presentato un elenco di opzioni per la selezione dell'utente, ad esempio la scelta di un paese in una configurazione del profilo.
di Gemini Advanced.
Una finestra di dialogo con testo e icone.
Figura 1. Esempio di una finestra di dialogo popolata con testo e icone.

Finestra di avviso

Il componibile AlertDialog offre una pratica API per la creazione di un Finestra di dialogo a tema Material Design. AlertDialog ha parametri specifici per per gestire particolari elementi della finestra di dialogo. Tra questi:

  • title: il testo visualizzato lungo la parte superiore della finestra di dialogo.
  • text: il testo visualizzato centrato nella finestra di dialogo.
  • icon: l'immagine visualizzata nella parte superiore della finestra di dialogo.
  • onDismissRequest: la funzione richiamata quando l'utente chiude la finestra di dialogo. ad esempio toccandoli all'esterno.
  • dismissButton: un componibile che funge da pulsante di chiusura.
  • confirmButton: un componibile che funge da pulsante di conferma.

L'esempio seguente implementa due pulsanti in una finestra di dialogo di avviso, uno che ignora la finestra di dialogo e un'altra conferma la sua richiesta.

@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

Questa implementazione implica un componibile padre che passa argomenti componibile 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

Questa implementazione si presenta nel seguente modo:

Una finestra di dialogo di avviso aperta con un pulsante per ignorare e confermare.
Figura 2. Una finestra di dialogo di avviso con pulsanti.
di Gemini Advanced.

Finestra di dialogo componibile

Dialog è un componibile di base che non fornisce alcuno stile o aree predefinite per i contenuti. Si tratta di un container relativamente semplice che devi completare con un container come Card. Di seguito sono riportati alcuni i parametri chiave di una finestra di dialogo:

  • onDismissRequest: la funzione lambda ha chiamato quando l'utente chiude la finestra di dialogo.
  • properties: un'istanza di DialogProperties che fornisce alcune con un ulteriore ambito di personalizzazione.
di Gemini Advanced.

Esempio di base

L'esempio seguente è un'implementazione di base dell'elemento componibile Dialog. Nota che utilizza Card come container secondario. Senza Card, Text verrà visualizzato 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

L'implementazione si presenta come segue. Tieni presente che quando la finestra di dialogo è aperta, i contenuti dell'app principale al di sotto appaiono scuri e non selezionabili:

Una finestra di dialogo che contiene solo un'etichetta.
Figura 3. Finestra di dialogo minima.

Esempio avanzato

Di seguito è riportata un'implementazione più avanzata del componibile Dialog. In questo in questo caso, il componente implementa manualmente un'interfaccia simile a AlertDialog dell'esempio precedente.

@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

Questa implementazione si presenta nel seguente modo:

Finestra di dialogo con una foto del Monte Feathertop, Victoria. Sotto l'immagine sono presenti un pulsante Ignora e un pulsante di conferma.
Figura 4. Una finestra di dialogo che include un'immagine.

Risorse aggiuntive