הרכיב Chip
הוא רכיב קומפקטי ואינטראקטיבי בממשק משתמש. הוא מייצג ייצוג מורכב
ישויות כמו איש קשר או תג, בדרך כלל עם סמל ותווית. זה יכול להיות
ניתן לסמן, לסגור או ללחוץ.
ארבעת סוגי הצ'יפים והמקומות שבהם אפשר להשתמש בהם הם:
- מסייע: מדריך את המשתמש במהלך משימה. מופיע לעתים קרובות כממשק משתמש זמני בתגובה לקלט של משתמשים.
- סינון: מאפשר למשתמשים לצמצם את התוכן מתוך קבוצה של אפשרויות. הן יכולות נבחרו או מבטלים את הבחירה, ועשויים לכלול סמל סימן וי לאחר בחירה.
- קלט: מייצג מידע שהמשתמשים סיפקו, כמו בחירות תפריט הם יכולים להכיל סמל וטקסט, והם יכולים לכלול סימן 'X'. להסרה.
- הצעה: הצגת המלצות למשתמש על סמך ההצעות האחרונות שלו פעילות או קלט. מופיעים בדרך כלל מתחת לשדה להזנת קלט כדי להציג בקשה למשתמש פעולות.
פלטפורמת API
יש ארבע תכנים קומפוזביליים שמתאימים לארבעת סוגי הצ'יפים. בקטעים הבאים נפרט את התכנים הקומפוזביליים האלה ואת ההבדלים ביניהם. עם זאת, הם חולקים את הפרמטרים הבאים:
label
: המחרוזת שמופיעה על הצ'יפ.icon
: הסמל שמוצג בתחילת הצ'יפ. חלק מ לתכנים קומפוזביליים ספציפיים יש ערכים נפרדים שלleadingIcon
ו-trailingIcon
הפרמטר.onClick
: ה-lambda שהצ'יפ קורא כשהמשתמש לוחץ עליו.
צ'יפ מסייע
התוכן הקומפוזבילי AssistChip
מספק דרך פשוטה ליצור
שבב מסייע שדוחף את המשתמש לכיוון מסוים. הבדל אחד
התכונה היא הפרמטר leadingIcon
שלה, שמאפשר להציג סמל בצד שמאל
של הצ'יפ. הדוגמה הבאה ממחישה איך אפשר להטמיע את הפרמטר:
@Composable fun AssistChipExample() { AssistChip( onClick = { Log.d("Assist chip", "hello world") }, label = { Text("Assist chip") }, leadingIcon = { Icon( Icons.Filled.Settings, contentDescription = "Localized description", Modifier.size(AssistChipDefaults.IconSize) ) } ) }
ההטמעה הזאת נראית כך.
![צ'יפ פשוט של סיוע.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-assist.png?authuser=7&hl=he)
סמל מסנן שהוחל
בתוכן הקומפוזבילי FilterChip
צריך לעקוב אחרי סטטוס העיבוד של הצ'יפ
מסומנת. הדוגמה הבאה ממחישה איך אפשר להציג ערך
סמל שסומן רק כשהמשתמש בחר את הצ'יפ:
@Composable fun FilterChipExample() { var selected by remember { mutableStateOf(false) } FilterChip( onClick = { selected = !selected }, label = { Text("Filter chip") }, selected = selected, leadingIcon = if (selected) { { Icon( imageVector = Icons.Filled.Done, contentDescription = "Done icon", modifier = Modifier.size(FilterChipDefaults.IconSize) ) } } else { null }, ) }
אחרי ביטול הבחירה, ההטמעה הזו מופיעה כך:
![צ'יפ סינון שלא נבחר, ללא בדיקה ורקע של תוכנית.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter.png?authuser=7&hl=he)
והיא מופיעה כך:
![צ'יפ מסנן שנבחר, עם בדיקה ורקע צבעוני.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=7&hl=he)
צ'יפ של קלט
אפשר להשתמש בתוכן הקומפוזבילי InputChip
כדי ליצור צ'יפים שמבוססים על
לאינטראקציה של המשתמשים. לדוגמה, בתוכנת אימייל, כשהמשתמש כותב
אימייל, צ'יפ קלט יכול לייצג אדם שהמשתמש הזין את הכתובת שלו
בשדה "to:" השדה הזה.
ההטמעה הבאה משקפת צ'יפ של קלט שכבר נמצא המצב שנבחר. המשתמש סוגר את הצ'יפ כשהוא לוחץ עליו.
@Composable fun InputChipExample( text: String, onDismiss: () -> Unit, ) { var enabled by remember { mutableStateOf(true) } if (!enabled) return InputChip( onClick = { onDismiss() enabled = !enabled }, label = { Text(text) }, selected = enabled, avatar = { Icon( Icons.Filled.Person, contentDescription = "Localized description", Modifier.size(InputChipDefaults.AvatarSize) ) }, trailingIcon = { Icon( Icons.Default.Close, contentDescription = "Localized description", Modifier.size(InputChipDefaults.AvatarSize) ) }, ) }
ההטמעה הזאת נראית כך.
![צ'יפ של קלט עם דמות וסמל בסוף.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-input.png?authuser=7&hl=he)
צ'יפ הצעה
התוכן הקומפוזבילי SuggestionChip
הוא הפריט הבסיסי ביותר מבין התכנים הקומפוזביליים שמופיעים ברשימה
בדף הזה, גם בהגדרת ה-API וגם בתרחישים לדוגמה הנפוצים שלו. הצעה
צ'יפים הם רמזים שנוצרים באופן דינמי. לדוגמה, באפליקציית צ'אט מבוססת-AI,
עשויים להשתמש בצ'יפים של הצעות כדי להציג תשובות אפשריות
הודעה.
כדאי ליישם את השיטה הזו של SuggestionChip
:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
היישום הזה נראה כך:
![צ'יפ פשוט של סיוע.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=7&hl=he)
צ'יפ משופר
כל הדוגמאות במסמך הזה משתמשות בתכנים קומפוזביליים בסיסיים המראה שלו. אם רוצים צ'יפ עם מראה גבוה, צריך להשתמש באחד של שלושת התכנים הקומפוזביליים הבאים: