Jetpack Compose - AlertDialog

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

AlertDialog adalah sebuah komponen pada Jetpack Compose yang digunakan untuk menampilkan dialog konfirmasi atau dialog pesan kepada pengguna. Berikut adalah penjelasan singkatnya:

• Apa itu AlertDialog pada Compose Jetpack? AlertDialog adalah komponen yang digunakan untuk menampilkan jendela dialog pop-up yang berisi pesan atau permintaan konfirmasi kepada pengguna. Ini adalah salah satu cara untuk berkomunikasi dengan pengguna tentang kejadian atau keputusan yang penting.

• Kapan harus menggunakannya? AlertDialog cocok digunakan ketika Anda perlu memberikan pemberitahuan, pesan konfirmasi, atau permintaan aksi dari pengguna. Contoh penggunaannya termasuk konfirmasi penghapusan data, meminta persetujuan untuk tindakan yang tidak dapat dibatalkan, atau memberi tahu pengguna tentang situasi penting.

• Apa bedanya dengan Dialog? Dialog adalah komponen yang lebih umum dan fleksibel yang dapat digunakan untuk berbagai jenis interaksi, sementara AlertDialog secara khusus digunakan untuk pesan atau konfirmasi yang memerlukan tindakan langsung dari pengguna.

Parameter/Atribut

@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,
    icon: @Composable (() -> Unit)? = null,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    shape: Shape = AlertDialogDefaults.shape,
    containerColor: Color = AlertDialogDefaults.containerColor,
    iconContentColor: Color = AlertDialogDefaults.iconContentColor,
    titleContentColor: Color = AlertDialogDefaults.titleContentColor,
    textContentColor: Color = AlertDialogDefaults.textContentColor,
    tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
    properties: DialogProperties = DialogProperties()
)

Parameter pada AlertDialog di Jetpack Compose

Berikut adalah penjelasan tentang parameter-parameter yang ada di komponen AlertDialog pada Jetpack Compose:

• onDismissRequest: () -> Unit

  • Fungsi lambda yang dipanggil ketika dialog diminta untuk ditutup. Biasanya digunakan untuk memperbarui state agar dialog tidak lagi ditampilkan.

• confirmButton: @Composable () -> Unit

  • Fungsi composable yang menentukan konten tombol konfirmasi dalam dialog.

• modifier: Modifier

  • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari dialog.

• dismissButton: @Composable (() -> Unit)?

  • Fungsi composable yang menentukan konten tombol penutup dalam dialog. Opsional, jika tidak disediakan, dialog akan memunculkan tombol bawaan atau tidak sama sekali tergantung pada platform.

• icon: @Composable (() -> Unit)?

  • Fungsi composable yang menentukan konten ikon dalam dialog. Opsional.

• title: @Composable (() -> Unit)?

  • Fungsi composable yang menentukan konten judul dalam dialog. Opsional.

• text: @Composable (() -> Unit)?

  • Fungsi composable yang menentukan konten teks dalam dialog. Opsional.

• shape: Shape

  • Bentuk dari dialog, seperti persegi panjang atau bulat. Defaultnya adalah AlertDialogDefaults.shape.

• containerColor: Color

  • Warna latar belakang kontainer dialog. Defaultnya adalah AlertDialogDefaults.containerColor.

• iconContentColor: Color

  • Warna konten ikon dalam dialog. Defaultnya adalah AlertDialogDefaults.iconContentColor.

• titleContentColor: Color

  • Warna konten judul dalam dialog. Defaultnya adalah AlertDialogDefaults.titleContentColor.

• textContentColor: Color

  • Warna konten teks dalam dialog. Defaultnya adalah AlertDialogDefaults.textContentColor.

• tonalElevation: Dp

  • Elevation dari bagian tonal (bagian utama) dalam dialog. Defaultnya adalah AlertDialogDefaults.TonalElevation.

• properties: DialogProperties

  • Objek yang digunakan untuk mengonfigurasi sifat-sifat dialog, seperti apakah dialog dapat ditutup dengan menekan tombol kembali atau menyentuh area di luar dialog.

Contoh

@Composable
fun DemoAlertDialog(modifier: Modifier = Modifier) {
    val showDialog = remember {
        mutableStateOf(true)
    }
    Button(onClick = {
        showDialog.value = true
    }) {
        Text("Show Dialog")
    }
    if (showDialog.value) {
        AlertDialog(
            onDismissRequest = { showDialog.value = false },
            confirmButton = {
                Button(onClick = { showDialog.value = false }) {
                    Text("Confirm")
                }
            },
            dismissButton = {
                Button(onClick = { showDialog.value = false }) {
                    Text("Dismiss")
                }
            },
            text = { Text("This is a dialog text") },
            icon = {
                Image(
                    painter = painterResource(id = R.drawable.the_ngoding),
                    contentDescription = null
                )
            }
        )
    }
}

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video