Alihkan

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.

Gambar 1. Komponen tombol.

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
        }
    )
}
Switch.kt

Jika tidak dicentang, implementasi ini akan muncul seperti berikut:

Gambar 2. Tombol yang tidak dicentang.

Ini adalah tampilan saat dicentang:

Gambar 3. Tombol yang dicentang.

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
        }
    )
}
Switch.kt

Dalam implementasi ini, tampilan yang tidak dicentang sama dengan contoh pada bagian sebelumnya. Namun, bila dicentang, implementasi ini muncul sebagai berikut ini:

Gambar 4. Tombol dengan ikon khusus dicentang.

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,
        )
    )
}
Switch.kt

Implementasi ini muncul sebagai berikut:

Gambar 5. Tombol dengan warna kustom.

Referensi lainnya

• Dokumen UI Material