תיבת סימון

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

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

אנטומיה

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

• 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

הסבר

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

התוצאה

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

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

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

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

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