צ'יפים של כותרות ב-Jetpack Compose Glimmer

מכשירי XR שנתמכים

ההנחיות האלה יעזרו לכם ליצור חוויות למכשירי XR מהסוגים הבאים.

מידע על סוגי מכשירי XR →

מידע על סוגי מכשירי XR →

ב-Jetpack Compose Glimmer, הרכיב TitleChip הוא רכיב לא אינטראקטיבי שמספק הקשר קצר או תווית לתוכן משויך, כמו Card או VerticalList.

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

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

הקוד הבא יוצר צ'יפ בסיסי עם שם:

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}
TitleChipSample.kt

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

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

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}
TitleChipSample.kt

דוגמה: יצירת צ'יפ של כותרת עם כרטיס

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

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }

        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))

        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}
TitleChipSample.kt

מידע חשוב על הקוד

• צ'יפ הכותרת ממורכז אופקית, שזה היישור הרגיל לצ'יפ כותרת שמוצב מעל כרטיס.
• לרכיב Spacer יש גובה קבוע כדי לספק את המרווח האנכי הנכון בין שני הרכיבים. ההגדרה מתבצעת באמצעות התג TitleChipDefaults.associatedContentSpacing.
• אפשר להשתמש בתווית leadingIcon כדי להוסיף הקשר חזותי נוסף לפני תוכן הטקסט.
• הטקסט של צ'יפ הכותרת מקבל אוטומטית את הסגנון caption.
• צ'יפ הכותרת לא אינטראקטיבי. אם אתם צריכים תווית שאפשר ללחוץ עליה, השתמשו ב-Button או ברכיב אינטראקטיבי אחר.