چک باکس

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

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

آناتومی

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

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

ایالات

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

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

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

پیاده سازی

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

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

قطعه زیر نحوه استفاده از Checkbox Composable را نشان می دهد:

@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 " را نشان می دهد.

نتیجه

این مثال وقتی علامت همه چک باکس ها را بردارید، مؤلفه زیر را تولید می کند.

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

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

منابع اضافی

• چک باکس های طراحی متریال