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
  • Sözleşmeyi veya kabulü belirtin.

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 durumda. Kutuda bir tire 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 üç durumunun (seçili değil, seçili ve belirsiz) her birine ö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ı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şaretli olmayan 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: Belirsiz olarak ayarlamanıza olanak tanıyan bir state parametresi olduğu için üst onay kutusu için gereklidir.
    • Checkbox: Durumu childCheckedStates içindeki ilgili öğeye bağlı olan her alt onay kutusu için kullanılır.
    • TextEtiketleri ve mesajları ("Tümünü seç", "X seçeneği", "Tüm seçenekler belirlendi") gösterir.
  • Mantık:
    • Üst onay kutusunun onClick simgesi, 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 örnekte, tüm onay kutularının işareti kaldırıldığında aşağıdaki bileşen oluşturulur.

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

Benzer şekilde, kullanıcı "Tümünü seç"e dokunduğunda tüm seçenekler işaretlenir ve 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