Komponen Switch
memungkinkan pengguna beralih di antara dua status: dicentang
dan tidak dicentang. Di aplikasi, Anda dapat menggunakan tombol akses yang memungkinkan pengguna melakukan salah satu hal
berikut:
- Mengaktifkan atau menonaktifkan setelan.
- Mengaktifkan atau menonaktifkan fitur.
- Pilih salah satu opsi.
Komponen ini memiliki dua bagian: thumb dan track. thumb adalah bagian {i>switch<i} yang dapat ditarik, dan {i>track<i} adalah latar belakang. Pengguna dapat menarik thumb ke kiri atau kanan untuk mengubah status tombol. Pengguna juga dapat mengetuk tombol untuk memeriksa dan menghapusnya.
Implementasi dasar
Lihat referensi Switch
untuk definisi API lengkap. Berikut adalah
beberapa parameter utama yang mungkin perlu Anda gunakan:
checked
: Status awal tombol.onCheckedChange
: Callback yang dipanggil saat status tombol berubah.enabled
: Apakah tombol diaktifkan atau dinonaktifkan.colors
: Warna yang digunakan untuk tombol.
Contoh berikut adalah implementasi minimal dari composable Switch
.
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
Implementasi ini akan muncul sebagai berikut jika tidak dicentang:
Berikut adalah tampilan jika dicentang:
Penerapan lanjutan
Parameter utama yang mungkin ingin Anda gunakan saat mengimplementasikan tombol yang lebih canggih adalah sebagai berikut:
thumbContent
: Gunakan ini untuk menyesuaikan tampilan thumb saat dicentang.colors
: Gunakan ini untuk menyesuaikan warna trek dan thumb.
Thumbnail kustom
Anda dapat meneruskan composable apa pun untuk parameter thumbContent
untuk membuat thumb kustom. Berikut adalah contoh tombol akses yang menggunakan ikon khusus untuk
thumb-nya:
@Composable fun SwitchWithIconExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it }, thumbContent = if (checked) { { Icon( imageVector = Icons.Filled.Check, contentDescription = null, modifier = Modifier.size(SwitchDefaults.IconSize), ) } } else { null } ) }
Dalam implementasi ini, tampilan yang tidak dicentang sama dengan contoh di bagian sebelumnya. Namun, jika dicentang, implementasi ini akan muncul sebagai berikut:
Warna khusus
Contoh berikut menunjukkan cara menggunakan parameter warna untuk mengubah warna thumb dan track tombol, dengan mempertimbangkan apakah tombol diperiksa atau tidak.
@Composable fun SwitchWithCustomColors() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it }, colors = SwitchDefaults.colors( checkedThumbColor = MaterialTheme.colorScheme.primary, checkedTrackColor = MaterialTheme.colorScheme.primaryContainer, uncheckedThumbColor = MaterialTheme.colorScheme.secondary, uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer, ) ) }
Implementasi ini akan muncul sebagai berikut: