الرموز في 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 IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}
IconSamples.kt

مثال: الرموز التي تتضمّن ألوانًا

ينشئ الرمز التالي رمزًا ملوّنًا باستخدام اللون الأساسي للمظهر:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}
IconSamples.kt

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

تنشئ التعليمة البرمجية التالية رمزًا تم تعديله ليكون بحجم معيّن:

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}
IconSamples.kt

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

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