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.
  • Aktifkan atau nonaktifkan fitur.
  • Pilih salah satu opsi.

Komponen ini memiliki dua bagian: ibu jari dan jalur. Tombol adalah bagian sakelar yang dapat ditarik, dan jalur adalah latar belakang. Pengguna dapat menarik kenop ke kiri atau kanan untuk mengubah status tombol. Mereka juga dapat mengetuk tombol untuk memeriksa dan menghapusnya.

Contoh komponen Switch dalam mode terang dan gelap.
Gambar 1. Komponen tombol.

Penerapan 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 penerapan minimal composable Switch.

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

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

Penerapan ini akan terlihat seperti berikut saat tidak dicentang:

Tombol dasar yang tidak dicentang.
Gambar 2. Tombol yang tidak dicentang.

Berikut tampilannya saat dicentang:

Tombol dasar yang dicentang.
Gambar 3. Tombol yang dicentang.

Penerapan lanjutan

Parameter utama yang mungkin ingin Anda gunakan saat menerapkan peralihan yang lebih canggih adalah sebagai berikut:

  • thumbContent: Gunakan ini untuk menyesuaikan tampilan ibu jari saat dicentang.
  • colors: Gunakan ini untuk menyesuaikan warna jalur dan ibu jari.

Thumb kustom

Anda dapat meneruskan composable apa pun untuk parameter thumbContent guna membuat gambar mini kustom. Berikut adalah contoh tombol yang menggunakan ikon kustom 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, saat diperiksa, penerapan ini akan muncul sebagai berikut:

Tombol yang menggunakan parameter thumbContent untuk menampilkan ikon kustom saat dicentang.
Gambar 4. Tombol dengan ikon yang dicentang kustom.

Warna khusus

Contoh berikut menunjukkan cara menggunakan parameter warna untuk mengubah warna thumb dan jalur sakelar, dengan mempertimbangkan apakah sakelar 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

Penerapan ini akan terlihat seperti berikut:

Tombol yang menggunakan parameter warna untuk menampilkan tombol dengan warna kustom untuk thumb dan track.
Gambar 5. Tombol dengan warna kustom.

Referensi lainnya