أزرار التبديل في Glimmer من Jetpack Compose

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

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

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

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

في Jetpack Compose Glimmer، يكون ToggleButton مكوّنًا تفاعليًا يغيّر مظهره استنادًا إلى حالة محدّدة. تم تحسين أزرار الإيقاف/التفعيل لنظارات بشاشة عرض من أجل توفير انتقالات مرئية واضحة في الشكل واللون. تشير هذه الانتقالات إلى ما إذا كان إجراء أو إعداد معيّنًا مفعّلاً.

استخدِم أزرار الإيقاف/التفعيل لعرض الإجراءات التي يمكن تفعيلها أو إيقافها. على عكس أزرار الإيقاف/التفعيل التي تعرض الرموز فقط، يعرض زر الإيقاف/التفعيل محتوى نصيًا بشكل أساسي، على الرغم من أنّه يتيح استخدام خانات اختيارية للرموز من أجل توفير سياق إضافي.

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

علم التشريح

يتألّف زر الإيقاف/التفعيل من حاوية تتغيّر بين الحالات وتصنيف يتضمّن رموزًا اختيارية.

الأحجام

على غرار الأزرار العادية، تتيح أزرار الإيقاف/التفعيل استخدام نوعَين من الأحجام:

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

تستخدم أزرار الإيقاف/التفعيل بشكل تلقائي ToggleButtonDefaults.animateShape. يؤدي ذلك إلى إنشاء انتقال سلس بين الحالتَين التاليتَين:

• غير محدّد: GlimmerTheme.shapes.large (عادةً ما يكون CircleShape)
• محدّد: ToggleButtonDefaults.CheckedShape (RoundedCornerShape مع زوايا 20.dp)

يدير الصف ToggleButtonColors دقة الألوان للحالتَين التاليتَين:

• غير محدّد: يتم ضبطه تلقائيًا على GlimmerTheme.colors.surface.
• محدّد: يتم ضبطه تلقائيًا على GlimmerTheme.colors.surface.

صورة متحركة

تستخدم أزرار الإيقاف/التفعيل الإعدادات التلقائية التالية للصور المتحركة:

• animateShape: يوفّر Shape يقدّر أحجام الزوايا باستخدام مواصفات تحريك ارتدادي (stiffness = 600f).
• colors: دالة مصنع لتخصيص ألوان الخلفية والمحتوى لكلتا الحالتَين
• CheckedShape: RoundedCornerShape(20.dp) ثابت يُستخدَم للحالة المحدّدة
• contentPadding: يتم اكتسابه من ButtonDefaults.contentPadding.

مثال: زر إيقاف/تفعيل

تنشئ التعليمة البرمجية التالية زر إيقاف/تفعيل أساسيًا:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"

    ToggleButton(
        checked = checked,
        onCheckedChange = { checked = it }
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt

مثال: زر إيقاف/تفعيل مع رمز في المقدّمة

تنشئ التعليمة البرمجية التالية زر إيقاف/تفعيل مع رمز في المقدّمة:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt