Kotak centang

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

  • Aktifkan atau nonaktifkan 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 mendeskripsikan kotak centang.

Negara bagian

Kotak centang dapat berada dalam salah satu dari tiga status:

  • Tidak dipilih: Kotak centang tidak dipilih. Kotak itu kosong.
  • Tidak tentu: Kotak centang dalam status tidak tentu. Kotak tersebut berisi tanda hubung.
  • Dipilih: Kotak centang dipilih. Kotak berisi tanda centang.

Gambar berikut menunjukkan tiga status kotak centang.

Contoh komponen kotak centang dalam masing-masing dari tiga statusnya: tidak dipilih, dipilih, dan tidak tentu.
Gambar 1. Tiga status kotak centang. Tidak dipilih, tidak tentu, dan dipilih.

Penerapan

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

  • checked: Boolean yang mencatat apakah kotak centang dicentang atau tidak.
  • 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"
    )
}

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 saat tidak dicentang:

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

Berikut 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, ada kotak centang induk dan serangkaian kotak centang turunan. Saat pengguna mengetuk kotak centang induk, aplikasi akan mencentang 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")
    }
}

Penjelasan

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

  • Pengelolaan status:
    • childCheckedStates: Daftar boolean yang menggunakan mutableStateOf() untuk melacak status yang 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 status yang sesuai dalam daftar childCheckedStates.
    • Kode akan menampilkan "All options selected" jika semua kotak turunan dicentang.

Hasil

Contoh ini menghasilkan komponen berikut saat semua kotak 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 induk akan menampilkan status tidak tentu:

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

Referensi lainnya