Onay kutusu

Onay kutuları, kullanıcıların listeden bir veya daha fazla öğe seçmesine olanak tanır. Kullanıcının aşağıdakileri yapmasına izin vermek için onay kutusu kullanabilirsiniz:

  • Bir öğeyi etkinleştirme veya devre dışı bırakma
  • Listeden birden fazla seçenek belirleme
  • Onay veya kabulü belirtir.

Anatomi

Onay kutusu aşağıdaki öğelerden oluşur:

  • Kutu: Onay kutusunun kapsayıcısıdır.
  • İşaret: Onay kutusunun seçili olup olmadığını gösteren görsel göstergedir.
  • Etiket: Onay kutusunu açıklayan metindir.

Eyaletler

Onay kutusu üç durumdan birinde olabilir:

  • Seçili değil: Onay kutusu seçili değildir. Kutu boş.
  • Belirsiz: Onay kutusu belirsiz bir durumdadır. Kutuda kısa çizgi var.
  • Seçili: Onay kutusu seçilidir. Kutuda bir onay işareti var.

Aşağıdaki resimde bir onay kutusunun üç durumu gösterilmektedir.

Onay kutusu bileşeninin üç durumuna (seçili değil, seçili ve belirsiz) örnek.
Şekil 1. Onay kutusunun üç durumu. Seçilmemiş, belirsiz ve seçilmiş.

Uygulama

Uygulamanızda onay kutusu oluşturmak için Checkbox composable'ı kullanabilirsiniz. Unutmamanız gereken birkaç önemli parametre vardır:

  • checked: Onay kutusunun işaretli olup olmadığını belirten boole değeri.
  • onCheckedChange(): Kullanıcı onay kutusuna dokunduğunda uygulamanın çağırdığı işlev.

Aşağıdaki snippet'te, Checkbox composable'ın nasıl kullanılacağı gösterilmektedir:

@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"
    )
}

Açıklama

Bu kod, başlangıçta işaretlenmemiş bir onay kutusu oluşturur. Kullanıcı onay kutusunu tıkladığında onCheckedChange lambda, checked durumunu günceller.

Sonuç

Bu örnek, işaretlenmediğinde aşağıdaki bileşeni oluşturur:

Etiketli, işaretlenmemiş bir onay kutusu. Altındaki metinde "Onay kutusu işaretli değil" yazıyor.
Şekil 2. İşaretli olmayan onay kutusu

Aynı onay kutusu işaretlendiğinde ise şu şekilde görünür:

Etiketli, işaretli bir onay kutusu. Altındaki metinde "Onay kutusu işaretli" yazıyor.
Şekil 3. İşaretli onay kutusu

İleri düzey örnek

Aşağıda, uygulamanızda onay kutularını nasıl uygulayabileceğinize dair daha karmaşık bir örnek verilmiştir. Bu snippet'te bir üst onay kutusu ve bir dizi alt onay kutusu vardır. Kullanıcı üst onay kutusuna dokunduğunda uygulama tüm alt onay kutularını işaretler.

@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")
    }
}

Açıklama

Bu örnekte dikkat etmeniz gereken birkaç nokta vardır:

  • Durum yönetimi:
    • childCheckedStates: Her bir alt onay kutusunun işaretli durumunu izlemek için mutableStateOf() kullanan Boole değerlerinin listesi.
    • parentState: Değeri, alt onay kutularının durumlarından türetilen bir ToggleableState.
  • Kullanıcı arayüzü bileşenleri:
    • TriStateCheckbox: Üst onay kutusu için gereklidir. Bu onay kutusunda, durumu belirsiz olarak ayarlamanıza olanak tanıyan bir state parametresi bulunur.
    • Checkbox: Durumu childCheckedStates içindeki ilgili öğeye bağlı olan her alt onay kutusu için kullanılır.
    • Text: Etiketleri ve mesajları ("Tümünü seç", "X seçeneği", "Tüm seçenekler belirlendi") gösterir.
  • Mantık:
    • Üst onay kutusunun onClick, tüm alt onay kutularını mevcut üst durumun tersi olacak şekilde günceller.
    • Her alt onay kutusunun onCheckedChange değeri, childCheckedStates listesindeki ilgili durumunu günceller.
    • Tüm alt onay kutuları işaretlendiğinde kod "All options selected" değerini gösterir.

Sonuç

Bu örnek, tüm onay kutularının işareti kaldırıldığında aşağıdaki bileşeni oluşturur.

Etiketli, işaretlenmemiş bir dizi onay kutusu.
Şekil 4. İşaretlenmemiş onay kutuları

Benzer şekilde, kullanıcı "Tümünü seç"e dokunduğunda olduğu gibi tüm seçenekler işaretlendiğinde bileşen şu şekilde görünür:

Etiketli bir dizi işaretli onay kutusu. İlkinde "Tümünü seç" yazıyor. Bunların altında "Tüm seçenekler belirlendi" yazan bir metin bileşeni var.
Şekil 5. İşaretli onay kutuları

Yalnızca bir seçenek işaretlendiğinde üst onay kutusu belirsiz durumu gösterir:

Etiketli, işaretlenmemiş bir dizi onay kutusu. Biri hariç tümünün işareti kaldırılır. "Tümünü seç" etiketli onay kutusu belirsiz ve kısa çizgi gösteriyor.
Şekil 6. Belirsiz onay kutusu

Ek kaynaklar