Alihkan

Komponen Switch memungkinkan pengguna beralih antara dua status: dicentang dan tidak dicentang. Di aplikasi, Anda dapat menggunakan tombol untuk memungkinkan 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. Thumb adalah bagian tombol yang dapat ditarik, dan jalur adalah latar belakang. Pengguna dapat menarik ibu jari ke kiri atau kanan untuk mengubah status tombol. Mereka juga dapat mengetuk tombol untuk memeriksa dan menghapusnya.

Gambar 1. Komponen tombol.

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 composable Switch.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

Implementasi ini akan muncul sebagai berikut jika tidak dicentang:

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 thumbnail.

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

@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, jika dicentang, penerapan ini akan muncul sebagai berikut:

Gambar 4. Tombol dengan ikon khusus dicentang.

Warna khusus

Contoh berikut menunjukkan cara menggunakan parameter warna untuk mengubah warna tombol dan jalur 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:

Gambar 5. Tombol dengan warna kustom.

Referensi lainnya

• Dokumen UI Material