Il componente Dialog
mostra messaggi popup o richiede l'input dell'utente su un
livello superiore ai contenuti principali dell'app. Crea un'esperienza UI invasiva per
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.
- con un elenco di opzioni per la selezione dell'utente, come la scelta di un paese in una configurazione del profilo.
Finestra di avviso
Il componibile AlertDialog
fornisce una pratica API per creare una
finestra di dialogo a tema Material Design. AlertDialog
include parametri specifici per la gestione di elementi specifici 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 toccando 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 chiude la finestra di dialogo e un altro che 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") } } ) }
Questa implementazione implica un componibile padre che passa argomenti al componibile figlio 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 ) } } } }
Questa implementazione si presenta nel seguente modo:
Finestra di dialogo componibile
Dialog
è un componibile di base che non fornisce alcuno stile o aree predefinite per i contenuti. È un container relativamente semplice che
dovresti completare con un container come Card
. Di seguito sono riportati alcuni dei
parametri chiave di una finestra di dialogo:
onDismissRequest
: la funzione lambda ha chiamato quando l'utente chiude la finestra di dialogo.properties
: un'istanza diDialogProperties
che fornisce un ambito aggiuntivo per la personalizzazione.
Esempio di base
L'esempio seguente è un'implementazione di base dell'elemento componibile Dialog
. Tieni presente che utilizza un Card
come container secondario. Senza Card
, il componente Text
apparirebbe 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, ) } } }
L'implementazione si presenta come segue. Tieni presente che, quando la finestra di dialogo è aperta, i contenuti principali dell'app sottostante appaiono scuri e non selezionabili:
Esempio avanzato
Di seguito è riportata un'implementazione più avanzata del componibile Dialog
. In questo caso, il componente implementa manualmente un'interfaccia simile all'esempio AlertDialog
sopra riportato.
@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") } } } } } }
Questa implementazione si presenta nel seguente modo: