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

أجهزة XR المعنيّة

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

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

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

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

بنية البطاقة وفتحاتها

يتم إنشاء بطاقة 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.