תיבת סימון

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

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

אנטומיה

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

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

מדינות

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

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

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

הטמעה

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

• ‫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

הסבר

הקוד הזה יוצר תיבת סימון שלא מסומנת בהתחלה. כשהמשתמש לוחץ על תיבת הסימון, פונקציית ה-lambda‏ 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