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

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

في Jetpack Compose Glimmer، يمثّل Button مكوّنًا تفاعليًا تم تحسينه لإدخال نظارات العرض، ما يقدّم ملاحظات مرئية واضحة من خلال حالاته لتوجيه إجراءات المستخدم.

تم إنشاء الأزرار استنادًا إلى نظام سطح Jetpack Compose Glimmer، الذي يتعامل تلقائيًا مع الخصائص المادية، مثل الحدود والعمق.

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

تلقائي

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

كبير

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

علم التشريح

يتألف الزر من حاوية وتصنيف، مع رموز اختيارية في البداية والنهاية.

الجزء الوصف

الحاوية

سطح خلفية الزر

التصنيف

النص الذي يصف الإجراء

Icon (optional)

مؤشرات مرئية في البداية أو النهاية

الأحجام

تتيح أزرار Jetpack Compose Glimmer نوعَين مختلفَين من الأحجام. ويؤثر ذلك في الحد الأدنى للارتفاع والمسافة الداخلية.

الحجم الحد الأدنى للارتفاع سياسة الاستخدام التلقائية

متوسط

‎48.dp

الإجراءات والقوائم العادية (تلقائي)

كبير

‎72.dp

الإجراءات التي يتم التركيز عليها أو نقاط الدخول الرئيسية إلى الشاشة

الولايات

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

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

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

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

  • تستخدم الأزرار تلقائيًا GlimmerTheme.typography.bodySmall. احرص على أن يكون النص داخل الأزرار موجزًا ويصف الإجراء بوضوح.
  • الشكل التلقائي للزر هو GlimmerTheme.shapes.large. تساعد هذه الاستدارة المتسقة المستخدمين في تحديد الأزرار في واجهة نظارات العرض.

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

تنشئ التعليمة البرمجية التالية زرًا عاديًا يتضمّن نصًا:

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

مثال: أزرار تتضمّن رموزًا في البداية والنهاية

يمكنك أيضًا إضافة رموز إلى بداية النص (باستخدام leadingIcon) أو نهايته (باستخدام trailingIcon) لتوفير سياق إضافي.

تنشئ التعليمة البرمجية التالية زرًا يتضمّن رمزًا في البداية:

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}