البطاقات في Glimmer من Jetpack Compose

أجهزة XR المشمولة

تساعدك هذه الإرشادات في إنشاء تجارب لهذه الأنواع من أجهزة XR.

مزيد من المعلومات حول أنواع أجهزة XR →

مزيد من المعلومات حول أنواع أجهزة XR →

في Jetpack Compose Glimmer، يعمل مكوّن Card كحاوية أساسية للمحتوى ذي الصلة، ما يؤدي إلى إنشاء حد مرئي واضح لوحدات المعلومات التي يسهل فهمها. تتسم البطاقات بقدرة عالية على التكيّف، وتتيح استخدام مجموعات من المحتوى الرئيسي والعناوين والعناوين الفرعية والرموز السابقة أو اللاحقة الاختيارية. تتوسّع البطاقات لتشمل الحد الأقصى للعرض المتاح تلقائيًا، ويمكن التركيز عليها، ويمكنك أيضًا جعلها قابلة للنقر. تتيح البطاقات ترتيبًا عموديًا تكون فيه صورة العنوان في الأعلى، يليها العنوان والعنوان الفرعي والمحتوى الأساسي.

تم إنشاء البطاقات استنادًا إلى نظام سطح Jetpack Compose Glimmer، لذا فهي تكتسب خصائص مادية مثل تأثيرات العمق والقص وعلامات الحدود البارزة المتسقة.

علم التشريح والحقول

تم إنشاء بطاقة Jetpack Compose Glimmer من عدة عناصر متخصصة تتيح لك تخصيص محتواها وتصميمها.

الإعدادات التلقائية للبطاقات

تنطبق الإعدادات التلقائية التالية على البطاقات:

• العرض: تتوسّع البطاقات لتشمل الحد الأقصى للعرض المتاح على الشاشة من أجل تحسين سهولة القراءة على نظارات بشاشة عرض.
• الحد الأدنى للارتفاع: 80.dp
• المسافة العمودية بين النصوص: 3.dp
• شكل العنوان: يستخدم RoundedCornerShape مع زوايا 24.dp
• مساحة المحتوى: يتم ضبطها تلقائيًا على GlimmerTheme.componentSpacingValues.medium. يؤثر ذلك في المساحة الخارجية حول صور العنوان وحاوية المحتوى.
• الشكل: يتم ضبطه تلقائيًا على GlimmerTheme.shapes.medium.

• عرض النص: يتم استخدام القيم التلقائية من GlimmerTheme.typography للحقول التالية:

  • العنوان: bodyMedium
  • العنوان الفرعي: caption
  • المحتوى الأساسي: bodySmall

مثال: بطاقة أساسية

يوضّح الرمز التالي الحد الأدنى من الرموز اللازمة لإنشاء بطاقة:

Card { Text("This is a card") }
CardSamples.kt

مثال: بطاقة تتضمّن حقولاً متعددة

يوضّح الرمز التالي كيفية استخدام حقول متعددة معًا لإنشاء بطاقة:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}
CardSamples.kt

نقاط أساسية حول الرمز

• يوضّح كيفية استخدام عناصر مختلفة للبطاقة، مثل title و subtitle وleadingIcon، لتخصيص محتوى البطاقة وبنيتها.
• يستخدم الرمز Card مع onClick لجعل سطح البطاقة بالكامل تفاعليًا.

بطاقات الإجراءات

إذا أردت تضمين زر إجراء مع بطاقة، استخدِم ActionCard. تتضمّن بطاقات الإجراءات العناصر نفسها التي تتضمّنها البطاقات العادية، بالإضافة إلى مَعلمة action إضافية تحدّد الزر السفلي.

مثال: بطاقة إجراء أساسية

يوضّح هذا الرمز كيفية إنشاء ActionCard:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}
CardSamples.kt

مثال: بطاقة إجراء تتضمّن رمزًا

يوضّح هذا الرمز كيفية إنشاء ActionCard أكثر تعقيدًا تتضمّن رموزًا:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}
CardSamples.kt