چک باکس

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

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

توجه: اگر می‌توان چندین گزینه را از یک لیست انتخاب کرد، به جای سوئیچ‌ها یا دکمه‌های رادیویی از کادرهای تأیید استفاده کنید

آناتومی

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

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

ایالت ها

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

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

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

شکل 1. سه حالت یک چک باکس. انتخاب نشده، نامشخص و انتخاب شده.

پیاده سازی

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

نتیجه

این مثال وقتی تیک آن را بردارید، مؤلفه زیر را تولید می کند:

شکل 2. چک باکس را بردارید

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

شکل 3. چک باکس علامت زده شده است

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

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

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

توجه: اگر می‌خواهید یک چک باکس با حالت نامشخص داشته باشید، باید از TriStateCheckbox استفاده کنید. این به این دلیل است که یک پارامتر state از نوع ToggleState دارد، در حالی که Checkbox ندارد.

نتیجه

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

شکل 4. چک باکس ها را علامت نزنید

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

شکل 5. چک باکس های علامت زده شده است

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

شکل 6. چک باکس نامشخص

منابع اضافی

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