Komponen Switch
memungkinkan pengguna beralih antara dua status: dicentang
dan tidak dicentang. Di aplikasi, Anda dapat menggunakan tombol akses agar pengguna dapat melakukan salah satu
berikut ini:
- Aktifkan atau nonaktifkan setelan.
- Mengaktifkan atau menonaktifkan fitur.
- Pilih salah satu opsi.
Komponen ini memiliki dua bagian: thumb dan track. Jempol adalah perangkat yang dapat ditarik bagian dari {i>switch<i}, dan {i>track<i} adalah latar belakangnya. Pengguna dapat menarik jempol ke kiri atau kanan untuk mengubah status {i>switch<i}. Mereka juga dapat mengetuk untuk memeriksa dan menghapusnya.
![Contoh komponen Tombol akses dalam mode terang dan gelap.](https://developer.android.google.cn/static/develop/ui/compose/images/components/switches.png?authuser=19&hl=id)
Implementasi dasar
Lihat referensi Switch
untuk definisi API lengkap. Berikut ini adalah
beberapa parameter utama yang
mungkin perlu Anda gunakan:
checked
: Status awal tombol.onCheckedChange
: Callback yang dipanggil saat status perubahan {i>switch<i}.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 } ) }
Jika tidak dicentang, implementasi ini akan muncul seperti berikut:
![Tombol dasar yang tidak dicentang.](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=19&hl=id)
Ini adalah tampilan saat dicentang:
![Tombol akses dasar yang dicentang.](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch.png?authuser=19&hl=id)
Penerapan lanjutan
Parameter utama yang mungkin ingin Anda gunakan saat menerapkan model {i>switch<i} adalah sebagai berikut:
thumbContent
: Gunakan ini untuk menyesuaikan tampilan ibu jari saat sudah dicentang.colors
: Gunakan ini untuk menyesuaikan warna trek dan thumb.
Thumbnail kustom
Anda dapat meneruskan composable apa pun untuk parameter thumbContent
guna membuat
jempol. Berikut ini adalah contoh {i>switch<i} yang menggunakan ikon khusus untuk
ibu jari:
@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 pada bagian sebelumnya. Namun, bila dicentang, implementasi ini muncul sebagai berikut ini:
![Tombol yang menggunakan parameter thumbContent untuk menampilkan ikon kustom saat dicentang.](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-icon.png?authuser=19&hl=id)
Warna khusus
Contoh berikut menunjukkan cara menggunakan parameter warna untuk mengubah warna ibu jari dan {i>switch<i} sebuah {i>switch<i}, dengan mempertimbangkan apakah {i>switch<i} dicentang.
@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 muncul sebagai berikut:
![Tombol yang menggunakan parameter warna untuk menampilkan tombol dengan warna kustom untuk thumb dan tack.](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-colors.png?authuser=19&hl=id)