תיבות סימון מאפשרות למשתמשים לבחור פריט אחד או יותר מתוך רשימה. אפשר להשתמש כדי לאפשר למשתמש לבצע את הפעולות הבאות:
- מפעילים או מכבים פריט.
- בוחרים מתוך כמה אפשרויות ברשימה.
- לציין הסכמה או הסכמה.
אנטומיה
תיבת סימון מורכבת מהרכיבים הבאים:
- תיבה: זהו המאגר של תיבת הסימון.
- בדיקה: זה האינדיקטור החזותי שמראה אם תיבת הסימון נבחר או לא.
- תווית: זהו הטקסט שמתאר את תיבת הסימון.
מדינות
תיבת סימון יכולה להיות באחד משלושת המצבים הבאים:
- לא מסומנת: תיבת הסימון לא מסומנת. התיבה ריקה.
- קבוע: תיבת הסימון נמצאת במצב לא קבוע. הקופסה מכיל מקף.
- נבחרה: תיבת הסימון מסומנת. בתיבה מופיע סימן.
התמונה הבאה ממחישה את שלושת המצבים של תיבת סימון.
הטמעה
אתם יכולים להשתמש בתוכן הקומפוזבילי 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" ) }
הסבר
הקוד הזה יוצר תיבת סימון שלא מסומנת בהתחלה. כשהמשתמש לוחץ
בתיבת הסימון, ה-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") } }
הסבר
הנה כמה נקודות שכדאי לשים לב אליהן מהדוגמה הזו:
- ניהול מצב:
childCheckedStates
: רשימה של בוליאניים שמשתמשים ב-mutableStateOf()
כדי לעקוב אחרי המצב המסומן של כל תיבת סימון צאצא.parentState
:ToggleableState
שהערך שלו נגזר תיבות סימון צאצא .
- רכיבי ממשק משתמש:
TriStateCheckbox
: חובה עבור תיבת הסימון של ההורה, כי היא פרמטרstate
שמאפשר להגדיר אותו כקבוע.Checkbox
: משמש לכל תיבת סימון של צאצא שהמצב שלה מקושר אל את הרכיב התואם ב-childCheckedStates
.Text
: הצגת תוויות והודעות ('בחירת הכול', 'אפשרות X', 'הכול' נבחרו".
- לוגיקה:
- ב-
onClick
בתיבת הסימון של ההורה, כל תיבות הסימון של הצאצאים מתעדכנות מול מצב ההורה הנוכחי. - המצב
onCheckedChange
של כל תיבת סימון צאצא מעדכן את המצב הרלוונטי ברשימהchildCheckedStates
. - בקוד מוצג הכיתוב '
All options selected
' כשכל תיבות הסימון הצאצא סומנה.
- ב-
התוצאה
בדוגמה הזו נוצר הרכיב הבא כשכל תיבות הסימון לא מסומנות.
בדומה לכך, הרכיב מופיע כאשר כל האפשרויות מסומנות, כשהמשתמש מקיש על 'בחירת הכול':
כאשר רק אפשרות אחת מסומנת, תיבת הסימון של ההורה מציגה את מספר 'קבוע' מדינה: