תיבת סימון

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

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

אנטומיה

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

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

מדינות

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

• לא מסומנת: תיבת הסימון לא מסומנת. התיבה ריקה.
• לא ידוע: התיבה לא מסומנת. התיבה מכילה מקף.
• Selected: תיבת הסימון מסומנת. התיבה מכילה סימן וי.

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

הטמעה

אפשר להשתמש ברכיב ה-Composable‏ Checkbox כדי ליצור תיבת סימון באפליקציה. יש רק כמה פרמטרים חשובים שכדאי לזכור:

• checked: הערך הבוליאני שמציין אם תיבת הסימון מסומנת או לא.
• onCheckedChange(): הפונקציה שהאפליקציה קוראת לה כשהמשתמש מקייש על התיבה.

קטע הקוד הבא מדגים איך להשתמש ב-composable 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', 'כל האפשרויות נבחרו').
• Logic:
  • סימון התיבה של ההורה onClick מעדכן את כל התיבות של הצאצאים למצב ההפוך למצב הנוכחי של ההורה.
  • כל תיבה של onCheckedChange בצאצא מעדכנת את המצב התואם שלה ברשימה childCheckedStates.
  • הקוד מציג את הערך All options selected כשכל התיבות של הצאצאים מסומנות.

התוצאה

הדוגמה הזו יוצרת את הרכיב הבא כשכל התיבות לא מסומנות.

כך נראה הרכיב גם כשכל האפשרויות מסומנות, למשל כשהמשתמש מקייש על 'בחירת הכול':

כשמסומנת רק אפשרות אחת, התיבה של ההורה מציגה את המצב הלא ידוע:

מקורות מידע נוספים

• תיבות סימון בסגנון Material Design