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

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

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

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

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

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

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

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

تلقائي

كبير

علم التشريح

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

الأحجام

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

الولايات

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

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

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

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

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

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

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

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

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

مجموعات الأزرار

يتيح لك العنصر القابل للإنشاء ButtonGroup تجميع الأزرار في صف قابل للتمرير يعمل كوحدة تحكّم في التركيز. أثناء تمرير المستخدم، ينتقل التركيز تلقائيًا لتمييز الزر الذي يتطابق مع موضع التمرير الحالي.

مثال: مجموعات الأزرار

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

التحكّم في التركيز في مجموعات الأزرار

يمكنك نقل التركيز إلى أي زر في مجموعة للتحكّم في الاختيار يدويًا.

يمكنك تخصيص سلوك التمرير والتحكّم فيه باستخدام حالة ButtonGroup:

1. يمكنك تعريف الحالة باستخدام rememberButtonGroupState.
2. يمكنك تمريرها إلى العنصر القابل للإنشاء ButtonGroup.
3. يمكنك استدعاء animateScrollToItem (أو scrollToItem للتمرير الفوري ) للانتقال إلى عنصر معيّن ونقل التركيز إليه تلقائيًا.

تنقل التعليمة البرمجية التالية التركيز من زر إلى آخر عند النقر:

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt