תיבת סימון

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

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

אנטומיה

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

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

מדינות

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

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

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

הטמעה

אפשר להשתמש ברכיב ה-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