Jetpack Compose - Dialog

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

Dialog adalah sebuah komponen pada Jetpack Compose yang digunakan untuk menampilkan jendela dialog interaktif. Berikut adalah penjelasan singkatnya:

• Apa itu Dialog pada Compose Jetpack? Dialog adalah komponen yang digunakan untuk menampilkan jendela pop-up di atas UI utama. Dialog ini biasanya digunakan untuk meminta konfirmasi dari pengguna, menampilkan informasi penting, atau mengumpulkan input dari pengguna.

• Kapan harus menggunakannya? Dialog cocok digunakan ketika Anda perlu menangkap perhatian pengguna secara langsung untuk melakukan tindakan tertentu. Contoh penggunaan termasuk konfirmasi penghapusan data, menampilkan pesan kesalahan, atau mengumpulkan input pengguna seperti dalam formulir.

• Apa bedanya dengan BottomSheet? BottomSheet adalah komponen yang muncul dari bagian bawah layar dan biasanya tetap terintegrasi dengan tampilan utama, sedangkan Dialog menampilkan jendela pop-up terpisah yang mengaburkan sisa UI. BottomSheet lebih cocok untuk menyajikan opsi tambahan atau informasi yang terkait dengan konten utama tanpa mengganggu alur pengguna, sedangkan Dialog lebih intrusif dan digunakan untuk interaksi yang memerlukan perhatian penuh dari pengguna.

Parameter/Atribut

@Composable
fun Dialog(
    onDismissRequest: () -> Unit,
    properties: DialogProperties = DialogProperties(),
    content: @Composable () -> Unit
)

Parameter pada Dialog di Jetpack Compose

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

• onDismissRequest: () -> Unit

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

• 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.

• content: @Composable () -> Unit

  • Fungsi composable yang menentukan konten dari dialog. Di sinilah UI untuk dialog Anda didefinisikan.

Contoh

@Composable
fun DemoDialog(modifier: Modifier = Modifier) {
    val showDialog = remember {
        mutableStateOf(true)
    }
    Button(onClick = {
        showDialog.value = true
    }) {
        Text("Show Dialog")
    }
    if (showDialog.value) {
        Dialog(
            onDismissRequest = {
                showDialog.value = false
            }
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(color = Color.Blue),
            ) {
                Column(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.the_ngoding),
                        contentDescription = null
                    )
                    Text(
                        "Yuk Belajar Bareng",
                        color = Color.White,
                        modifier = Modifier.padding(8.dp)
                    )
                    Button(onClick = {
                        showDialog.value = false
                    }) {
                        Text("Close Dialog")
                    }
                }
            }
        }
    }
}

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

Video