תיבת סימון

תיבות סימון מאפשרות למשתמשים לבחור פריט אחד או יותר מתוך רשימה. אפשר להשתמש בתיבת סימון כדי לאפשר למשתמש לבצע את הפעולות הבאות:

• מפעילים או משביתים פריט.
• לבחור מבין כמה אפשרויות ברשימה.
• להביע הסכמה או אישור.

אנטומיה

תיבת סימון מורכבת מהרכיבים הבאים:

• תיבה: זהו המאגר של תיבת הסימון.
• תיבת סימון: האינדיקטור החזותי שמראה אם התיבה מסומנת או לא.
• תווית: הטקסט שמתאר את תיבת הסימון.

מדינות

תיבת סימון יכולה להיות באחד משלושה מצבים:

• לא מסומנת: תיבת הסימון לא מסומנת. התיבה ריקה.
• לא מוגדר: תיבת הסימון במצב לא מוגדר. בתיבה יש מקף.
• מסומנת: תיבת הסימון מסומנת. התיבה מכילה סימן וי.

בתמונה הבאה מוצגים שלושת המצבים של תיבת סימון.

הטמעה

אתם יכולים להשתמש בפונקציה הקומפוזבילית 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