Alihkan

Komponen Switch memungkinkan pengguna beralih antara dua status: dicentang dan tidak dicentang. Di aplikasi, Anda dapat menggunakan tombol untuk mengizinkan pengguna melakukan salah satu hal berikut:

• Aktifkan atau nonaktifkan setelan.
• Mengaktifkan atau menonaktifkan fitur.
• Pilih salah satu opsi.

Komponen ini memiliki dua bagian: thumb dan track. Jempol adalah bagian {i>switch<i} yang dapat ditarik, 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 {i>switch<i} 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
        }
    )
}
Switch.kt

Jika tidak dicentang, implementasi ini akan muncul seperti berikut:

Ini adalah tampilan saat dicentang:

Penerapan lanjutan

Parameter utama yang mungkin ingin Anda gunakan saat menerapkan tombol lanjutan adalah sebagai berikut:

• thumbContent: Gunakan ini untuk menyesuaikan tampilan thumbnail saat dicentang.
• colors: Gunakan ini untuk menyesuaikan warna trek dan thumb.

Thumbnail kustom

Anda dapat meneruskan composable apa pun untuk parameter thumbContent guna membuat thumbnail kustom. Berikut adalah contoh tombol 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
        }
    )
}
Switch.kt

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 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:

Referensi tambahan

• Dokumen UI Material