Kotak centang

Kotak centang memungkinkan pengguna memilih satu atau beberapa item dari daftar. Anda dapat menggunakan kotak centang untuk mengizinkan pengguna melakukan hal berikut:

  • Mengaktifkan atau menonaktifkan item.
  • Memilih dari beberapa opsi dalam daftar.
  • Menunjukkan persetujuan atau penerimaan.

Anatomi

Kotak centang terdiri dari elemen berikut:

  • Kotak: Ini adalah penampung untuk kotak centang.
  • Centang: Ini adalah indikator visual yang menunjukkan apakah kotak centang dipilih atau tidak.
  • Label: Ini adalah teks yang menjelaskan kotak centang.

Status

Kotak centang dapat berada dalam salah satu dari tiga status:

  • Tidak dipilih: Kotak centang tidak dipilih. Kotak kosong.
  • Tidak ditentukan: Kotak centang dalam status tidak ditentukan. Kotak berisi tanda hubung.
  • Dipilih: Kotak centang dipilih. Kotak berisi tanda centang.

Gambar berikut menunjukkan tiga status kotak centang.

Contoh komponen kotak centang dalam ketiga statusnya: tidak dipilih, dipilih, dan tidak ditentukan.
Gambar 1. Tiga status kotak centang. Tidak dipilih, tidak ditentukan, dan dipilih.

Implementasi

Anda dapat menggunakan composable Checkbox untuk membuat kotak centang di aplikasi. Hanya ada beberapa parameter utama yang perlu diingat:

  • checked: Boolean yang menangkap apakah kotak centang dicentang atau tidak dicentang.
  • onCheckedChange(): Fungsi yang dipanggil aplikasi saat pengguna mengetuk kotak centang.

Cuplikan berikut menunjukkan cara menggunakan composable Checkbox:

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

    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            "Minimal checkbox"
        )
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
    }

    Text(
        if (checked) "Checkbox is checked" else "Checkbox is unchecked"
    )
}
Checkbox.kt

Penjelasan

Kode ini membuat kotak centang yang awalnya tidak dicentang. Saat pengguna mengklik kotak centang, lambda onCheckedChange akan memperbarui status checked.

Hasil

Contoh ini menghasilkan komponen berikut jika tidak dicentang:

Kotak centang yang tidak dicentang dengan label. Teks di bawahnya bertuliskan 'Kotak centang tidak dicentang'
Gambar 2. Kotak centang yang tidak dicentang

Dan beginilah tampilan kotak centang yang sama saat dicentang:

Kotak centang yang dicentang dengan label. Teks di bawahnya bertuliskan 'Kotak centang dicentang'
Gambar 3. Kotak centang yang dicentang

Contoh lanjutan

Berikut adalah contoh yang lebih kompleks tentang cara menerapkan kotak centang di aplikasi Anda. Dalam cuplikan ini, terdapat kotak centang induk dan serangkaian kotak centang turunan. Saat pengguna mengetuk kotak centang induk, aplikasi akan memeriksa semua kotak centang turunan.

@Composable
fun CheckboxParentExample() {
    // Initialize states for the child checkboxes
    val childCheckedStates = remember { mutableStateListOf(false, false, false) }

    // Compute the parent state based on children's states
    val parentState = when {
        childCheckedStates.all { it } -> ToggleableState.On
        childCheckedStates.none { it } -> ToggleableState.Off
        else -> ToggleableState.Indeterminate
    }

    Column {
        // Parent TriStateCheckbox
        Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text("Select all")
            TriStateCheckbox(
                state = parentState,
                onClick = {
                    // Determine new state based on current state
                    val newState = parentState != ToggleableState.On
                    childCheckedStates.forEachIndexed { index, _ ->
                        childCheckedStates[index] = newState
                    }
                }
            )
        }

        // Child Checkboxes
        childCheckedStates.forEachIndexed { index, checked ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text("Option ${index + 1}")
                Checkbox(
                    checked = checked,
                    onCheckedChange = { isChecked ->
                        // Update the individual child state
                        childCheckedStates[index] = isChecked
                    }
                )
            }
        }
    }

    if (childCheckedStates.all { it }) {
        Text("All options selected")
    }
}
Checkbox.kt

Penjelasan

Berikut adalah beberapa poin yang harus Anda perhatikan dari contoh ini:

  • Pengelolaan status:
    • childCheckedStates: Daftar boolean yang menggunakan mutableStateOf() untuk melacak status dicentang dari setiap kotak centang turunan.
    • parentState: ToggleableState yang nilainya berasal dari status kotak centang turunan.
  • Komponen UI:
    • TriStateCheckbox: Diperlukan untuk kotak centang induk karena memiliki parameter state yang memungkinkan Anda menyetelnya ke tidak ditentukan.
    • Checkbox: Digunakan untuk setiap kotak centang turunan dengan statusnya yang ditautkan ke elemen yang sesuai di childCheckedStates.
    • Text: Menampilkan label dan pesan ("Pilih semua", "Opsi X", "Semua opsi dipilih").
  • Logika:
    • onClick kotak centang induk memperbarui semua kotak centang turunan ke kebalikan dari status induk saat ini.
    • onCheckedChange setiap kotak centang turunan memperbarui statusnya yang sesuai dalam daftar childCheckedStates.
    • Kode menampilkan "All options selected" saat semua kotak centang turunan diberi centang.

Hasil

Contoh ini menghasilkan komponen berikut saat semua kotak centang tidak dicentang.

Serangkaian kotak centang berlabel yang tidak dicentang dengan label.
Gambar 4. Kotak centang yang tidak dicentang

Demikian pula, ini adalah tampilan komponen saat semua opsi dicentang, seperti saat pengguna mengetuk pilih semua:

Serangkaian kotak centang berlabel yang dicentang dengan label. Yang pertama ditandai 'pilih semua'. Ada komponen teks di bawahnya yang bertuliskan 'semua opsi dipilih'.
Gambar 5. Kotak centang yang dicentang

Jika hanya satu opsi yang dicentang, kotak centang induk akan menampilkan status tidak tentu:

Serangkaian kotak centang berlabel yang tidak dicentang dengan label. Semuanya tidak dicentang kecuali satu. Kotak centang berlabel 'pilih semua' tidak dapat ditentukan, menampilkan tanda hubung.
Gambar 6. Kotak centang tidak ditentukan

Referensi lainnya