צ'יפ

הרכיב 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. צ'יפ של סיוע.

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

בתוכן הקומפוזבילי 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 כדי ליצור צ'יפים שמבוססים על לאינטראקציה של המשתמשים. לדוגמה, בתוכנת אימייל, כשהמשתמש כותב אימייל, צ'יפ קלט יכול לייצג אדם שהמשתמש הזין את הכתובת שלו בשדה "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)
            )
        },
    )
}
Chip.kt

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

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

צ'יפ הצעה

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

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

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

היישום הזה נראה כך:

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

צ'יפ משופר

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

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