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.

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:

Dan beginilah tampilan kotak centang yang sama saat 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 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 tentu.
  • 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.

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

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

Referensi lainnya

• Kotak Centang Desain Material