תיבת סימון

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

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

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

אנטומיה

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

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

מדינות

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

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

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

איור 1. שלושת המצבים של תיבת סימון. לא נבחר, לא קבוע ונבחר.

הטמעה

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

הסבר

הקוד הזה יוצר תיבת סימון שלא מסומנת בהתחלה. כשהמשתמש לוחץ בתיבת הסימון, ה-lambda של onCheckedChange מעדכנת את המצב של checked.

תוצאה

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

איור 2. תיבת סימון לא מסומנת

כך אותה תיבת סימון מופיעה כאשר היא מסומנת:

איור 3. תיבת סימון שסומנה

דוגמה מתקדמת

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

@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' כשכל תיבות הסימון הצאצא סומנה.

הערה: אם רוצים להגדיר תיבת סימון עם מצב ביניים, צריך להשתמש TriStateCheckbox. זאת מפני שיש בה פרמטר מסוג state ToggleState, ואילו Checkbox לא.

תוצאה

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

איור 4. תיבות סימון לא מסומנות

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

איור 5. תיבות סימון מסומנות

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

איור 6. תיבת סימון ביניים

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

• תיבות סימון של עיצוב Material Design