Komponen Dialog
menampilkan pesan pop-up atau meminta input pengguna di
di atas konten aplikasi utama. Hal ini menciptakan pengalaman
UI yang mengganggu untuk
menarik perhatian pengguna.
Di antara kasus penggunaan untuk dialog adalah sebagai berikut:
- Mengonfirmasi tindakan pengguna, seperti saat menghapus file.
- Meminta input pengguna, seperti dalam aplikasi daftar tugas.
- Menyajikan daftar opsi untuk pilihan pengguna, seperti memilih negara di penyiapan profil.
Dialog notifikasi
Composable AlertDialog
menyediakan API yang mudah untuk membuat
Dialog bertema Desain Material. AlertDialog
memiliki parameter khusus untuk
menangani elemen tertentu dari dialog. Di antaranya adalah sebagai berikut:
title
: Teks yang muncul di bagian atas dialog.text
: Teks yang muncul di tengah dialog.icon
: Grafis yang muncul di bagian atas dialog.onDismissRequest
: Fungsi yang dipanggil saat pengguna menutup dialog, seperti mengetuk di luarnya.dismissButton
: Composable yang berfungsi sebagai tombol tutup.confirmButton
: Composable yang berfungsi sebagai tombol konfirmasi.
Contoh berikut mengimplementasikan dua tombol dalam dialog peringatan, satu tombol menutup dialog, dan satu lagi yang mengonfirmasi permintaannya.
@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") } } ) }
Implementasi ini menyiratkan composable induk yang meneruskan argumen ke composable turunan dengan cara ini:
@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 ) } } } }
Implementasi ini muncul sebagai berikut:
![Dialog pemberitahuan terbuka yang memiliki tombol tutup dan konfirmasi.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-alert.png?authuser=19&hl=id)
Composable dialog
Dialog
adalah composable dasar yang tidak memberikan gaya visual atau
serta slot yang telah
ditentukan untuk konten. Ini adalah kontainer yang relatif sederhana yang
Anda harus mengisinya dengan penampung seperti Card
. Berikut ini adalah beberapa
parameter utama dialog:
onDismissRequest
: Lambda yang dipanggil saat pengguna menutup dialog.properties
: InstanceDialogProperties
yang menyediakan beberapa ruang lingkup tambahan untuk penyesuaian.
Contoh dasar
Contoh berikut adalah implementasi dasar dari composable Dialog
. Catatan
bahwa kode tersebut menggunakan Card
sebagai penampung sekunder. Tanpa Card
, Text
komponen akan muncul sendiri di atas konten aplikasi utama.
@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, ) } } }
Implementasi ini muncul sebagai berikut. Perhatikan bahwa saat dialog terbuka, konten aplikasi utama di bawahnya tampak gelap dan berwarna abu-abu:
![Dialog yang tidak berisi apa pun selain label.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-minimal.png?authuser=19&hl=id)
Contoh lanjutan
Berikut adalah penerapan lanjutan dari composable Dialog
. Di sini
ini, komponen akan mengimplementasikan antarmuka yang serupa dengan AlertDialog
secara manual
contoh di atas.
@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") } } } } } }
Implementasi ini muncul sebagai berikut:
![Dialog dengan foto Mount Feathertop, Victoria. Di bawah gambar terdapat tombol tutup dan tombol konfirmasi.](https://developer.android.com/static/develop/ui/compose/images/components/dialog-image.png?authuser=19&hl=id)