Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - Switch

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

Switch pada Jetpack Compose

Switch adalah sebuah komponen UI di Jetpack Compose yang digunakan untuk membuat tombol yang dapat diaktifkan atau dinonaktifkan. Ketika tombol tersebut ditekan, statusnya akan berubah antara aktif dan non-aktif.

Kapan Harus Menggunakan Switch:

Pengaturan On/Off: Switch digunakan ketika Anda memiliki opsi yang dapat diaktifkan atau dinonaktifkan oleh pengguna.
Pilihan yang Tidak Eksklusif: Berbeda dengan RadioButton, Switch tidak berada dalam grup eksklusif. Pengguna dapat mengaktifkan beberapa Switch sekaligus.
Kontrol Status: Switch berguna untuk menyediakan kontrol yang intuitif bagi pengguna untuk mengatur preferensi, status, atau opsi aplikasi secara dinamis.

Perbedaan dengan RadioButton:

Fungsionalitas: RadioButton digunakan untuk pilihan eksklusif di dalam grup, di mana hanya satu opsi dapat dipilih dalam satu waktu. Sedangkan Switch digunakan untuk opsi yang tidak eksklusif, di mana beberapa opsi dapat aktif secara bersamaan.
Interaksi: RadioButton biasanya digunakan dalam grup untuk memilih satu opsi dari beberapa, sedangkan Switch lebih sering digunakan untuk mengaktifkan atau menonaktifkan suatu fitur atau opsi.

Dengan menggunakan Switch, Anda dapat memberikan pengguna kontrol yang jelas dan intuitif untuk mengubah status atau preferensi dalam aplikasi Anda.

Parameter/Atribut

@Composable
@Suppress("ComposableLambdaParameterNaming", "ComposableLambdaParameterPosition")
fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    thumbContent: (@Composable () -> Unit)? = null,
    enabled: Boolean = true,
    colors: SwitchColors = SwitchDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)

Switch Parameter

checked: Boolean
- Menunjukkan apakah switch sedang dalam keadaan aktif atau tidak.
onCheckedChange: ((Boolean) -> Unit)?
- Lambda yang dipanggil ketika status switch berubah.
modifier: Modifier = Modifier
- Modifier yang dapat digunakan untuk menyesuaikan tata letak atau gaya switch.
thumbContent: (@Composable () -> Unit)? = null
- Konten yang akan ditampilkan di dalam thumb (bagian yang bisa ditarik) switch. Opsional.
enabled: Boolean = true
- Menentukan apakah switch dapat diinteraksi oleh pengguna atau tidak.
colors: SwitchColors = SwitchDefaults.colors()
- Pengaturan warna untuk switch.
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
- Sumber interaksi untuk switch, yang memungkinkan untuk menangani interaksi pengguna seperti klik atau sentuhan.

Contoh

@Composable
fun DemoSwitch(modifier: Modifier = Modifier) {
    Column {
        Switch(checked = true, onCheckedChange = {

        })
        Switch(checked = false, onCheckedChange = {

        })
    }
}

Switch