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ştirin veya devre dışı bırakın.
• Listedeki birden fazla seçenek arasından seçim yapın.
• Kabul ettiğinizi belirtin.

Not: Kullanıcı bir listeden birden fazla seçenek seçebiliyorsa anahtarlar veya radyo düğmeleri yerine onay kutuları kullanın.

Anatomi

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

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

Eyaletler

Onay kutuları üç durumdan birinde olabilir:

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

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

Şekil 1. Onay kutusunun üç durumu. Seçilmemiş, belirsiz ve seçili.

Uygulama

Uygulamanızda onay kutusu oluşturmak için Checkbox bileşenini kullanabilirsiniz. Dikkat etmeniz gereken birkaç önemli parametre vardır:

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

Aşağıdaki snippet'te, Checkbox bileşeninin 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"
    )
}
Checkbox.kt

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 örnekte, onay kutusu işaretli değilse aşağıdaki bileşen oluşturulur:

Şekil 2. İşaretlenmemiş onay kutusu

İşaretlendiğinde aynı onay kutusu şu şekilde görünür:

Şekil 3. İşaretlenmiş onay kutusu

İleri düzey örnek

Aşağıda, uygulamanıza 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 bulunmaktadır. Kullanıcı üst onay kutusuna dokunduğunda uygulama tüm alt onay kutularını kontrol eder.

@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

Açıklama

Bu örnekte dikkat etmeniz gereken bazı noktalar aşağıda belirtilmiştir:

• Durum yönetimi:
  • childCheckedStates: Her 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 içerdiğinden üst onay kutusu için gereklidir.
  • Checkbox: Her alt onay kutusu için kullanılır ve durumu childCheckedStates'daki ilgili öğeye bağlıdır.
  • Text: Etiketleri ve mesajları ("Tümünü seç", "X seçeneği", "Tüm seçenekler seçili") gösterir.
• Mantık:
  • Üst onay kutusunun onClick, tüm alt onay kutularını mevcut üst öğe durumunun tersine günceller.
  • Her alt onay kutusunun onCheckedChange, childCheckedStates listesindeki ilgili durumunu günceller.
  • Tüm alt onay kutuları işaretlendiğinde kodda "All options selected" gösterilir.

Not: Belirsiz durumda bir onay kutusu kullanmak istiyorsanız TriStateCheckbox kullanmanız gerekir. Bunun nedeni, Checkbox'nin ToggleState türüne sahip bir state parametresine sahip olmamasıdır.

Sonuç

Bu örnekte, tüm onay kutularının işareti kaldırıldığında aşağıdaki bileşen oluşturulur.

Şekil 4. İşaretlenmemiş onay kutuları

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

Şekil 5. İşaretli onay kutuları

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

Şekil 6. Belirsiz onay kutusu

Ek kaynaklar

• Materyal Tasarım Onay Kutuları