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

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

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

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

איור 1. דוגמה לצ'יפ כותרת עם סגנון ברירת מחדל ולצ'יפ כותרת קבוע ב-Jetpack Compose Glimmer. לכל צ'יפ של שם יש תווית (1) וסמל או ישות אופציונליים (2) בתחילת הצ'יפ.

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

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

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

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

@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")
        }
    }
}

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

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