כרטיסים ב-Jetpack Compose Glimmer

מכשירי XR רלוונטיים

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

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

משקפי AI

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

ב-Jetpack Compose Glimmer, הרכיב Card נועד לקבץ ולהציג מידע קשור ביחידה אחת. הכרטיסים ניתנים להתאמה רבה, והם תומכים בשילובים של תוכן ראשי, כותרות וכתוביות אופציונליות וסמלים מובילים או נגררים. כרטיסים ממלאים כברירת מחדל את הרוחב המלא המקסימלי של המסך במשקפי ה-AI, אפשר להתמקד בהם ואפשר גם להפוך אותם לקליקביליים.

איור 1. דוגמה לכמה סגנונות שונים של כרטיסים ב-Jetpack Compose Glimmer.

מבנה הכרטיס והחריצים

כרטיס Glimmer של Jetpack Compose מורכב מכמה רכיבים מיוחדים, ולכן אפשר להתאים אישית את התוכן והפריסה שלו.

• כותרת: החלק העליון של הכרטיס, שנועד להכיל תמונה.

• כותרת וכותרת משנה: שדות הטקסט האלה מספקים את התוויות הראשית והמשנית של הכרטיס.

• סמל מוביל: סמל אופציונלי שמופיע בתחילת אזור התוכן של הכרטיס.

• סמל נגרר: סמל אופציונלי שמופיע בסוף אזור התוכן של הכרטיס.

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

• התוכן העיקרי: החלק המרכזי של הכרטיס, שבו מציבים את הטקסט העיקרי או תוכן אחר.

דוגמה בסיסית: יצירת כרטיס בסיסי

אפשר ליצור כרטיס בסיסי מאוד עם מעט מאוד קוד:

Card { Text("This is a card") }

דוגמה מפורטת: הצגת כרטיס מורכב

בדוגמת הקוד הבאה מוצג איך להשתמש בכמה משבצות יחד כדי ליצור כרטיס. בנוסף, מוסבר איך להתאים Card ל-TitleChip.

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

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

• המאמר הזה מסביר איך להשתמש ברכיבים שונים של כרטיסים, כמו header,‏ title,‏ subtitle,‏ leadingIcon וaction, כדי להתאים אישית את התוכן והמבנה של הכרטיס.
• דוגמה לאופן שבו מציבים TitleChip ומשתמשים ב-Spacer.