צ'יפ

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

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

  • ‫Assist: הדרכה למשתמש במהלך ביצוע משימה. לרוב מופיע כרכיב זמני בממשק המשתמש בתגובה לקלט של המשתמש.
  • סינון: מאפשר למשתמשים לצמצם את התוכן מתוך קבוצת אפשרויות. אפשר לסמן אותם או לבטל את הסימון שלהם, ויכול להיות שיופיע בהם סמל של וי כשהם מסומנים.
  • קלט: מייצג מידע שהמשתמשים סיפקו, כמו בחירות בתפריט. הם יכולים להכיל סמל וטקסט, ולספק את האפשרות 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. צ'יפ של Assistant.

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

רכיב ה-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 הוא הבסיסי ביותר מבין רכיבי ה-Composable שמופיעים בדף הזה, גם בהגדרת ה-API שלו וגם בתרחישי השימוש הנפוצים שלו. הצעות הן רמזים שנוצרים באופן דינמי. לדוגמה, באפליקציית צ'אט מבוססת-AI, אפשר להשתמש בצ'יפים של הצעות כדי להציג תשובות אפשריות להודעה האחרונה.

כדאי לעיין בהטמעה הזו של SuggestionChip:

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

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

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

צ'יפ מובלט

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

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