Komponen Dialog
menampilkan pesan pop-up atau meminta input pengguna pada
lapisan 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.
- Menampilkan daftar opsi untuk pilihan pengguna, seperti memilih negara dalam penyiapan profil.
Dialog pemberitahuan
Composable AlertDialog
menyediakan API yang mudah untuk membuat
dialog bertema Desain Material. AlertDialog
memiliki parameter tertentu untuk
menangani elemen tertentu dari dialog. Di antaranya adalah sebagai berikut:
title
: Teks yang muncul di sepanjang bagian atas dialog.text
: Teks yang muncul di tengah dialog.icon
: Grafik yang muncul di bagian atas dialog.onDismissRequest
: Fungsi yang dipanggil saat pengguna menutup dialog, seperti dengan mengetuk di luar dialog.dismissButton
: Composable yang berfungsi sebagai tombol tutup.confirmButton
: Composable yang berfungsi sebagai tombol konfirmasi.
Contoh berikut mengimplementasikan dua tombol dalam dialog pemberitahuan, satu tombol yang 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 akan muncul sebagai berikut:
Composable dialog
Dialog
adalah composable dasar yang tidak menyediakan gaya atau slot standar untuk konten. Container ini relatif sederhana yang
harus Anda isi dengan container seperti Card
. Berikut adalah beberapa
parameter utama dialog:
onDismissRequest
: Lambda dipanggil saat pengguna menutup dialog.properties
: InstanceDialogProperties
yang memberikan beberapa cakupan tambahan untuk penyesuaian.
Contoh dasar
Contoh berikut adalah implementasi dasar dari composable Dialog
. Perhatikan
bahwa penampung ini menggunakan Card
sebagai penampung sekunder. Tanpa Card
, komponen Text
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 akan muncul sebagai berikut. Perhatikan bahwa saat dialog terbuka, konten aplikasi utama di bawahnya akan berwarna gelap dan berwarna abu-abu:
Contoh lanjutan
Berikut adalah penerapan composable Dialog
yang lebih canggih. Dalam hal
ini, komponen mengimplementasikan antarmuka yang serupa secara manual dengan contoh AlertDialog
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 akan muncul sebagai berikut: