أزرار الرموز في Glimmer من Jetpack Compose

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

في Jetpack Compose Glimmer، يمثّل IconButton مكوّنًا تفاعليًا صغيرًا يُستخدم لعرض إجراءات تكميلية بنقرة واحدة.

تبدو أزرار الرموز أصغر من الأزرار العادية، ولكنها تحتفظ بحدود مادية لضمان سهولة التفاعل على نظارات بشاشة عرض.

بالنسبة إلى حالات الاستخدام الأخرى، تتوفّر أيضًا الأزرار العادية وأزرار التبديل.

مثال على بعض الأنماط المختلفة لأزرار الرموز في Jetpack Compose Glimmer. تعرض هذه الأمثلة خمس حالات لزر الرمز: مفعَّل (1)، ومركَّز (2)، ومضغوط (3)، وغير مفعَّل (4)، وغير مفعَّل ومركَّز (5).

الأحجام والأبعاد

العنصر البُعد

الحد الأدنى لحجم الحاوية

48 × 48 وحدة بكسل مستقلة الكثافة

حجم الرمز الداخلي

32 × 32 وحدة بكسل مستقلة الكثافة

المساحة المتروكة التلقائية للمحتوى

GlimmerTheme.componentSpacingValues.small

الولايات

تغيّر أزرار الرموز في Jetpack Compose Glimmer مظهرها للإشارة إلى حالتها.

  • مفعَّل: الحالة التفاعلية التلقائية
  • مركَّز: يتم تطبيق GlimmerTheme.depthEffectLevels.level1 وتفعيل إضاءة الحدود المركَّزة.
  • مضغوط: يتم تطبيق طبقة بيضاء شبه شفافة على السطح.
  • غير مفعَّل: الزر غير تفاعلي وتتم إزالة الملاحظات المرئية.

الإعدادات التلقائية لأزرار الرموز

تنطبق الإعدادات التلقائية التالية على أزرار الرموز:

  • الشكل: يتم ضبط الخيار التلقائي على GlimmerTheme.shapes.large (عادةً ما يكون دائريًا).
  • اللون: يتم ضبط الخيار التلقائي على GlimmerTheme.colors.surface.
  • لون المحتوى: يتم حسابه تلقائيًا من لون الخلفية ما لم يتم توفيره بشكلٍ صريح.
  • المساحة المتروكة للمحتوى: توفّر المسافة التلقائية بين الرمز وحافة الحاوية.
  • الحد الأدنى للحجم: قيمة ثابتة هي 48.dp لمنع الأزرار من أن تصبح صغيرة جدًا بحيث يصعب التفاعل معها.
  • حجم الرمز: يتم ضبط الخيار التلقائي على GlimmerTheme.iconSizes.small (32.dp).

مثال: زر الرمز

تنشئ التعليمة البرمجية التالية زر رمزًا بخصائص تلقائية:

@Composable
fun IconButtonSample() {
    IconButton(onClick = { /* Handle action */ }) {
        Icon(FavoriteIcon, contentDescription = "Localized description")
    }
}