الرموز في Jetpack Compose Glimmer

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

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

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

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

في مكتبة Jetpack Compose Glimmer، يمثّل المكوّن Icon عنصر في واجهة المستخدم لعرض أيقونات بلون واحد. تتعامل الرموز بذكاء مع التلوين وتغيير الحجم لتبقى مقروءة ومتسقة بصريًا مع GlimmerTheme.

الأحجام

مع أنّ الرموز تستخدم تلقائيًا الحجم الذي يوفّره LocalIconSize، يمكنك أيضًا استخدام أحجام الرموز الثلاثة المتوفّرة لضبط حجم معيّن. يتم أيضًا استخدام هذه الأحجام تلقائيًا في السياقات التالية:

مصادر الرموز

يمكن أن تقبل الرموز ImageVector أو ImageBitmap أو Painter كمصدر لها. عند تحديد الرموز الخاصة بك، استخدِم ImageVector حيثما أمكن لتعزيز العرض الواضح بأي حجم على نظارات العرض.

الألوان والتلوين

• التلوين التلقائي: يحدّد الرمز لونه استنادًا إلى LocalContentColor الذي توفّره المساحة الرئيسية LocalContentColor التي توفّرها المساحة الرئيسية، مثل surface أو Button.
• تلوين يدوي: استخدِم المَعلمة tint لتطبيق لون معيّن.
• مواد العرض المتعددة الألوان: بالنسبة إلى الرموز التي لا يجب تلوينها (مثل شعارات العلامات التجارية المتعددة الألوان)، اضبط القيمة tint = Color.Unspecified.
• الصور العامة: بالنسبة إلى الصور الفوتوغرافية أو الصور العامة التي لا تتّبع قواعد تغيير الحجم والتلوين الخاصة بالرموز، استخدِم androidx.compose.foundation.Image العادي بدلاً من ذلك.

مثال: رمز أساسي ضمن مساحة عرض

ينشئ الرمز التالي رمزًا موضوعًا داخل سطح دائري، باستخدام اللون الأساسي للمظهر:

@Composable
fun IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}
IconSamples.kt

مثال: رموز بأحجام مختلفة

يوضّح الرمز التالي أحجام الرموز المختلفة:

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}
IconSamples.kt

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

• يتم تخصيص حجم كل رمز باستخدام GlimmerTheme.iconSizes مع معدِّل. بالنسبة إلى الرموز، تكون القيمة التلقائية هي GlimmerTheme.iconSizes.medium. استخدِم هذه الأحجام بدلاً من ترميز القيم بشكل ثابت للحفاظ على الاتساق في جميع عناصر واجهة المستخدم.
• تقدّم هذه السمة contentDescription مترجَمًا لكل رمز. يجب تقديم هذه الأوصاف دائمًا ما لم يكن الرمز تزيينيًا بحتًا.