Dialog

Komponen Dialog menampilkan pesan dialog atau meminta input pengguna pada lapisan di atas konten aplikasi utama. Dialog 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 di aplikasi daftar tugas.
• Menampilkan daftar opsi untuk pilihan pengguna, seperti memilih negara dalam penyiapan profil.

Gambar 1. Contoh dialog yang diisi dengan teks dan ikon.

Dialog notifikasi

Composable AlertDialog menyediakan API yang praktis untuk membuat dialog bertema Desain Material. AlertDialog memiliki parameter khusus untuk menangani elemen tertentu dari dialog. Di antaranya adalah:

• title: Teks yang muncul di bagian atas dialog.
• text: Teks yang muncul di tengah dalam dialog.
• icon: Gambar 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 yang menutup dialog, dan satu lagi yang mengonfirmasi permintaannya.

@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

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
                )
            }
        }
    }
}
Dialog.kt

Implementasi ini akan terlihat seperti berikut:

Gambar 2. Dialog pemberitahuan dengan tombol.

Catatan: Saat pengguna mengklik salah satu tombol, dialog akan ditutup. Saat pengguna mengklik konfirmasi, fungsi yang juga menangani konfirmasi akan dipanggil. Dalam contoh ini, fungsi tersebut adalah onDismissRequest() dan onConfirmRequest().

Catatan: Jika dialog Anda memerlukan kumpulan tombol yang lebih kompleks, sebaiknya gunakan composable Dialog dan isi dengan cara yang lebih bebas.

Composable dialog

Dialog adalah composable dasar yang tidak menyediakan gaya visual atau slot yang telah ditentukan untuk konten. Ini adalah container yang relatif sederhana yang harus Anda isi dengan container seperti Card. Berikut adalah beberapa parameter utama dialog:

• onDismissRequest: Lambda yang dipanggil saat pengguna menutup dialog.
• properties: Instance DialogProperties yang menyediakan beberapa cakupan tambahan untuk penyesuaian.

Perhatian: Tidak seperti contoh AlertDialog di bagian sebelumnya, Anda harus menentukan ukuran dan bentuk Dialog secara manual. Anda juga harus menyediakan penampung dalam.

Contoh dasar

Contoh berikut adalah implementasi dasar composable Dialog. Perhatikan bahwa tata letak 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,
            )
        }
    }
}
Dialog.kt

Implementasi ini akan terlihat seperti berikut. Perhatikan bahwa saat dialog terbuka, konten aplikasi utama di bawahnya tampak gelap dan berwarna abu-abu:

Gambar 3. Dialog minimal.

Contoh lanjutan

Berikut adalah implementasi composable Dialog yang lebih canggih. Dalam hal ini, komponen menerapkan antarmuka yang serupa secara manual ke contoh AlertDialog sebelumnya.

Perhatian: Jika Anda hanya perlu menampilkan dialog dua tombol seperti dalam contoh ini, sebaiknya gunakan AlertDialog dan API-nya yang lebih praktis. Namun, jika Anda ingin membuat dialog yang lebih kompleks, mungkin dengan formulir dan beberapa tombol, Anda harus menggunakan Dialog dengan konten kustom, seperti dalam contoh berikut.

@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

Implementasi ini akan terlihat seperti berikut:

Gambar 4. Dialog yang menyertakan gambar.

Referensi lainnya

• Dokumentasi Material UI