Jetpack Compose, Android • 19 Mei 2024

Jetpack Compose - DropdownMenu

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

DropdownMenu adalah komponen pada Jetpack Compose yang digunakan untuk menampilkan daftar pilihan atau menu dalam bentuk dropdown (menu jatuh bawah). Pengguna dapat memilih salah satu opsi dari daftar tersebut.

Kapan Harus Menggunakan DropdownMenu?

DropdownMenu biasanya digunakan dalam beberapa situasi:

Banyak Pilihan: Ketika terdapat banyak opsi yang dapat dipilih oleh pengguna dan tidak memungkinkan untuk menampilkannya secara langsung di layar.
Kompak: Untuk menghemat ruang layar, terutama ketika ada banyak opsi yang dapat dipilih.
Aksesibilitas: Untuk meningkatkan aksesibilitas dan kemudahan navigasi pengguna dalam memilih opsi.

Parameter/Atribut

@Composable
fun DropdownMenu(
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    offset: DpOffset = DpOffset(0.dp, 0.dp),
    properties: PopupProperties = PopupProperties(focusable = true),
    content: @Composable ColumnScope.() -> Unit
)

Parameter pada DropdownMenu di Jetpack Compose

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

expanded: Boolean
- Menentukan apakah menu dropdown sedang diperluas (ditampilkan) atau tidak.
onDismissRequest: () -> Unit
- Fungsi yang dipanggil ketika pengguna menutup menu dropdown.
modifier: Modifier
- Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari dropdown menu.
offset: DpOffset
- Menentukan offset (pergeseran) dari menu dropdown terhadap posisi asalnya.
properties: PopupProperties
- Properti popup yang mengatur perilaku dari menu dropdown. Defaultnya adalah PopupProperties(focusable = true).
content: @Composable ColumnScope.() -> Unit
- Isi dari dropdown menu yang berisi daftar pilihan atau opsi yang akan ditampilkan. Ini biasanya berupa daftar komponen-komponen dalam bentuk kolom.

Penjelasan

expanded: Parameter ini menentukan apakah menu dropdown sedang diperluas atau ditampilkan kepada pengguna.
onDismissRequest: Fungsi yang dipanggil ketika pengguna menutup menu dropdown, misalnya dengan menekan di luar menu dropdown atau menggunakan aksi tertentu seperti tombol "Tutup".
modifier: Modifier digunakan untuk menyesuaikan tata letak atau gaya visual dari dropdown menu, misalnya untuk mengatur ukuran atau warna latar belakang.
offset: Menentukan offset (pergeseran) dari menu dropdown terhadap posisi asalnya, misalnya untuk menyesuaikan posisi dropdown menu terhadap elemen yang memicunya.
properties: Properti popup yang mengatur perilaku dari menu dropdown, seperti fokusabilitas dan perilaku interaksi dengan keyboard.
content: Isi dari dropdown menu yang berisi daftar pilihan atau opsi yang akan ditampilkan kepada pengguna.

DropdownMenu pada Jetpack Compose digunakan untuk menampilkan daftar pilihan atau opsi dalam bentuk menu dropdown, yang memungkinkan pengguna untuk memilih satu atau lebih opsi sesuai kebutuhan.

Contoh

@Composable
fun DemoDropdownMenu(modifier: Modifier = Modifier) {
    val expanded = remember { mutableStateOf(false) }
    val options = listOf("Mangga", "Jeruk", "Nanas")
    var selectedIndex = remember { mutableStateOf(0) }

    Button(onClick = { expanded.value = true }) {
        Text(options[selectedIndex.value])
    }

    DropdownMenu(
        expanded = expanded.value,
        onDismissRequest = { expanded.value = false }
    ) {
        options.forEachIndexed { index, option ->
            DropdownMenuItem(
                text = { Text(option) },
                onClick = {
                    selectedIndex.value = index
                    expanded.value = false
                }
            )
        }
    }
}

Snackbar