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 bir onay kutusu kullanabilirsiniz:

• Bir öğeyi etkinleştirin veya devre dışı bırakın.
• Bir listedeki birden fazla seçenek arasından seçim yapın.
• Kabul ettiğinizi belirtin.

Anatomi

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

• Box: Bu, onay kutusu için kapsayıcı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 bir onay işareti vardır.

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

Uygulama

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

• checked: Onay kutusunun işaretli olup olmadığını gösteren boole değeridir.
• 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:

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

İ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 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 "belirsiz" olarak ayarlamanızı sağlayan bir state parametresine sahip olduğundan bu 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ı gösterir ("Tümünü seç", "Seçenek X", "Tüm seçenekler seçildi").
• 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 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.

Benzer şekilde, tüm seçenekler işaretlendiğinde bileşen bu şekilde görünür. Örneğin, kullanıcı "tümünü seç"e dokunduğunda:

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

Ek kaynaklar

• Materyal Tasarım Onay Kutuları