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

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

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

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

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

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

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

بنية الخانات

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

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

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

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

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

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

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

تنشئ التعليمة البرمجية التالية بطاقة أساسية:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}
CardSamples.kt

مثال: بطاقة معقّدة تتضمّن عدة خانات

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}
CardSamples.kt

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

• يوضّح هذا القسم كيفية استخدام عناصر البطاقة المختلفة، مثل header وtitle وleadingIcon وaction، لتخصيص محتوى البطاقة وبنيتها.
• يستخدم هذا الإجراء التحميل الزائد العادي Card مع إجراء لأنّ البطاقة فقط (أو الإجراء الداخلي) يجب أن يكون قابلاً للتركيز. إذا كنت بحاجة إلى جعل سطح البطاقة بأكمله تفاعليًا، استخدِم عملية التحميل الزائد Card مع onClick بدلاً من ذلك.
• تستخدم هذه البطاقة خانة إجراء، لذا لا يمكن التركيز على مساحة البطاقة، ويتم توجيه التركيز إلى زر الإجراء بدلاً من ذلك.