Jetpack Compose - Popup

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

Popup adalah sebuah komponen pada Jetpack Compose yang digunakan untuk menampilkan konten yang melayang di atas UI utama. Berikut adalah penjelasan singkatnya:

• Apa itu Popup pada Jetpack Compose? Popup adalah komponen yang digunakan untuk menampilkan konten melayang di atas tampilan utama aplikasi. Konten popup ini biasanya muncul ketika pengguna memilih atau membutuhkan akses ke beberapa pilihan atau informasi tambahan.

• Kapan harus menggunakannya? Popup cocok digunakan ketika Anda perlu menampilkan pilihan atau informasi tambahan secara ringan di atas konten utama, tanpa mengambil alih kontrol dari pengguna. Contoh penggunaannya termasuk menu konteks, tooltip, atau pilihan lain yang tidak memerlukan tindakan langsung dari pengguna.

• Apa bedanya dengan Dialog? Dialog adalah komponen yang lebih besar dan lebih mendominasi yang mengaburkan latar belakang dan memerlukan pengguna untuk menyelesaikan tindakan tertentu, seperti konfirmasi atau input. Popup, di sisi lain, lebih ringan dan lebih sesuai untuk menampilkan informasi tambahan atau pilihan yang tidak memerlukan perhatian penuh dari pengguna.

Parameter/Atribut

@Composable
fun Popup(
    alignment: Alignment = Alignment.TopStart,
    offset: IntOffset = IntOffset(0, 0),
    onDismissRequest: (() -> Unit)? = null,
    properties: PopupProperties = PopupProperties(),
    content: @Composable () -> Unit
)

Parameter pada Popup di Jetpack Compose

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

• alignment: Alignment

  • Penentuan posisi dari konten popup terhadap anchor atau area utama. Defaultnya adalah Alignment.TopStart, yang menempatkan popup di sudut atas kiri dari anchor atau area utama.

• offset: IntOffset

  • Perpindahan (offset) dari posisi popup relatif terhadap anchor atau area utama, dalam piksel. Defaultnya adalah IntOffset(0, 0), yang berarti tidak ada perpindahan.

• onDismissRequest: (() -> Unit)?

  • Fungsi lambda yang dipanggil ketika pengguna mencoba menutup popup, baik dengan menekan tombol kembali atau menyentuh di luar popup (jika diizinkan oleh PopupProperties). Opsional.

• properties: PopupProperties

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

• content: @Composable () -> Unit

  • Fungsi composable yang menentukan konten dari popup. Ini biasanya berupa tampilan yang akan muncul sebagai konten melayang di atas area utama.

Contoh

@Composable
fun DemoPopup() {
    val showPopup  = remember {
        mutableStateOf(true)
    }

    Button(onClick = { showPopup.value = true }) {
        Text("Show Popup")
    }

    if (showPopup.value) {
        Popup(onDismissRequest = { showPopup.value = false }) {
            // Konten Popup Anda
            Text("Ini adalah Popup", Modifier.padding(16.dp))
        }
    }
}

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

Video