چارگوش انتخاب

چارگوش‌های انتخاب به کاربران اجازه می‌دهند یک یا چند مورد را از فهرست انتخاب کنند. می‌توانید از چارگوش انتخاب استفاده کنید تا کاربر بتواند کارهای زیر را انجام دهد:

• موردی را روشن یا خاموش کنید.
• از بین چند گزینه در فهرست انتخاب کنید.
• نشان‌دهنده موافقت یا پذیرش باشد.

تشریح

چارگوش انتخاب از عناصر زیر تشکیل شده است:

• چارگوش: این محفظه چارگوش انتخاب است.
• علامت: این نشانگر تصویری نشان می‌دهد که چارگوش انتخاب انتخاب شده است یا نه.
• برچسب: این نوشتاری است که چارگوش انتخاب را توصیف می‌کند.

ایالت‌ها

چارگوش انتخاب می‌تواند در یکی از سه حالت زیر باشد:

• انتخاب‌نشده: چارگوش انتخاب علامت‌گذاری نشده است. جعبه خالی است.
• نامشخص: چارگوش انتخاب در وضعیت نامشخصی قرار دارد. جعبه حاوی خط تیره است.
• انتخاب‌شده: چارگوش انتخاب علامت زده شده است. چارگوش حاوی علامت تیک است.

تصویر زیر سه حالت چارگوش انتخاب را نشان می‌دهد.

پیاده‌سازی

می‌توانید از ترکیب‌پذیر Checkbox برای ایجاد چارگوش انتخاب در برنامه‌تان استفاده کنید. فقط چند پارامتر کلیدی وجود دارد که باید به‌خاطر بسپارید:

• checked: مقدار بولی که نشان می‌دهد چارگوش انتخاب علامت‌گذاری شده است یا نه.
• ‫onCheckedChange(): عملکردی که برنامه وقتی کاربر روی چارگوش انتخاب تک‌ضرب می‌زند فراخوانی می‌کند.

قطعه کد زیر نحوه استفاده از ترکیب‌پذیر 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"
    )
}
Checkbox.kt

توضیح

این کد چارگوش انتخابی ایجاد می‌کند که در ابتدا علامت نخورده است. وقتی کاربر روی چارگوش انتخاب کلیک می‌کند، onCheckedChange lambda وضعیت checked را به‌روز می‌کند.

نتیجه

این مثال درصورت لغو انتخاب، مؤلفه زیر را تولید می‌کند:

و این همان چارگوش انتخاب است وقتی علامت زده شده باشد:

نمونه پیشرفته

در زیر نمونه پیچیده‌تری از نحوه پیاده‌سازی چارگوش‌های انتخاب در برنامه‌تان آورده شده است. در این قطعه کد، یک چارگوش انتخاب والد و مجموعه‌ای از چارگوش‌های انتخاب فرزند وجود دارد. وقتی کاربر روی چارگوش انتخاب اصلی تک‌ضرب می‌زند، برنامه همه چارگوش‌های انتخاب فرعی را علامت می‌زند.

@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

توضیح

در این مثال، چند نکته وجود دارد که باید به آن‌ها توجه کنید:

• مدیریت وضعیت:
  • childCheckedStates: فهرستی از مقادیر بولی بااستفاده از mutableStateOf() برای ردیابی وضعیت علامت‌گذاری هر چارگوش انتخاب فرزند.
  • ‫parentState: ToggleableState که مقدار آن از وضعیت چارگوش‌های انتخاب فرزند مشتق می‌شود.
• مؤلفه‌های واسط کاربر:
  • ‫TriStateCheckbox: برای چارگوش انتخاب اصلی لازم است زیرا پارامتر state دارد که به شما امکان می‌دهد آن را روی نامشخص تنظیم کنید.
  • Checkbox: برای هر چارگوش انتخاب فرزند با وضعیت پیوندشده به عنصر مربوطه در childCheckedStates استفاده می‌شود.
  • Text: برچسب‌ها و پیام‌ها را نمایش می‌دهد («انتخاب همه»، «گزینه X»، «همه گزینه‌ها انتخاب شده‌اند»).
• منطق:
  • onClick چارگوش انتخاب والد همه چارگوش‌های انتخاب فرزند را به حالت مخالف والد فعلی به‌روز می‌کند.
  • onCheckedChange هر چارگوش انتخاب فرزند، وضعیت مربوط به آن را در فهرست childCheckedStates به‌روز می‌کند.
  • وقتی همه چارگوش‌های انتخاب فرزند علامت زده شده باشند، کد «All options selected» را نمایش می‌دهد.

نتیجه

وقتی همه چارگوش‌های انتخاب لغو انتخاب شده باشند، این نمونه مؤلفه زیر را تولید می‌کند.

به‌همین ترتیب، وقتی همه گزینه‌ها علامت زده شده باشند، مؤلفه به‌این‌صورت نشان داده می‌شود، مثلاً وقتی کاربر روی «انتخاب همه» تک‌ضرب می‌زند:

وقتی فقط یک گزینه علامت زده شده باشد، چارگوش انتخاب والد وضعیت نامشخص را نمایش می‌دهد:

منابع بیشتر

• چارگوش‌های انتخاب طراحی مواد