צ'יפ

הרכיב Chip הוא רכיב אינטראקטיבי קומפקטי של ממשק משתמש. הוא מייצג ישויות מורכבות כמו איש קשר או תג, לרוב עם סמל ותווית. אפשר לסמן אותו, לסגור אותו או ללחוץ עליו.

אלה ארבעת סוגי הצ'יפים והמקומות שבהם אפשר להשתמש בהם:

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

פלטפורמת 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)
            )
        }
    )
}
Chip.kt

ההטמעה הזאת נראית כך.

צ'יפ עזרה פשוט.
איור 2. צ'יפ של סיוע.

סמל מסנן שהוחל

כדי להשתמש ב-composable 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
        },
    )
}
Chip.kt

כשהאפשרות הזו לא מסומנת, היא נראית כך:

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

והיא מופיעה כך:

צ'יפ מסנן שנבחר, עם בדיקה ורקע צבעוני.
איור 4. צ'יפ המסנן שנבחר.

צ'יפ קלט

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

ההטמעה הבאה משקפת צ'יפ של קלט שכבר נמצא המצב שנבחר. המשתמש סוגר את הצ'יפ כשהוא לוחץ עליו.

@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)
            )
        },
    )
}
Chip.kt

ההטמעה הזאת נראית כך.

צ'יפ קלט עם דמות וסמל בסוף.
איור 5. צ'יפ של קלט.

הצעות קשורות

ה-composable SuggestionChip הוא הבסיסי ביותר מבין ה-composables שמפורטים בדף הזה, גם בהגדרת ה-API וגם בתרחישי השימוש הנפוצים שלו. הצעה צ'יפים הם רמזים שנוצרים באופן דינמי. לדוגמה, באפליקציית צ'אט עם AI, אפשר להשתמש בצ'יפים של הצעות כדי להציג תשובות אפשריות להודעה האחרונה.

כדאי ליישם את השיטה הזו של SuggestionChip:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

ההטמעה הזו נראית כך:

צ'יפ פשוט של סיוע.
איור 6. צ'יפ של סיוע.

צ'יפ בולט

בכל הדוגמאות במסמך הזה נעשה שימוש ברכיבי ה-Composable הבסיסיים עם מראה שטוח. אם רוצים צ'יפ עם מראה משופר, אפשר להשתמש באחד משלושת הרכיבים הניתנים לשילוב הבאים:

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