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

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

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

تشریح

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

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

ایالت‌ها

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

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

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

پیاده‌سازی

می‌توانید از عنصر ترکیبی 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 وضعیت 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» را نمایش می‌دهد.

نتیجه

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

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

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

منابع بیشتر

• چارگوش‌های انتخاب Material Design