Switch

يتيح عنصر Switch للمستخدمين التبديل بين حالتين: تم وضع علامة في المربّع أو لم يتم وضع علامة فيه. في تطبيقك، يمكنك استخدام مفتاح تبديل للسماح للمستخدم بتنفيذ أحد الإجراءات التالية:

• فعِّل أحد الإعدادات أو أوقِفه.
• تفعيل ميزة أو إيقافها
• حدِّد خيارًا.

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

التنفيذ الأساسي

اطّلِع على مرجع Switch للحصول على تعريف كامل لواجهة برمجة التطبيقات. في ما يلي بعض المَعلمات الرئيسية التي قد تحتاج إلى استخدامها:

• checked: تمثّل هذه السمة الحالة الأولية للمفتاح.
• ‫onCheckedChange: دالة ردّ يتم استدعاؤها عند تغيُّر حالة زر التبديل.
• enabled: ما إذا كان مفتاح التبديل مفعَّلاً أو غير مفعَّل.
• colors: الألوان المستخدَمة للمفتاح

المثال التالي هو عملية تنفيذ بسيطة للدالة البرمجية القابلة للإنشاء Switch.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

يظهر عنصر التنفيذ هذا على النحو التالي عند إلغاء تحديده:

إليك الشكل الذي يظهر به عند وضع علامة عليه:

التنفيذ المتقدّم

في ما يلي المَعلمات الأساسية التي قد تحتاج إلى استخدامها عند تنفيذ عملية تبديل أكثر تقدّمًا:

• thumbContent: استخدِم هذه السمة لتخصيص مظهر الإبهام عند وضع علامة في المربّع.
• colors: استخدِم هذا الخيار لتخصيص لون المسار والإبهام.

الصورة المصغّرة المخصّصة

يمكنك تمرير أي عنصر قابل للإنشاء إلى المَعلمة thumbContent لإنشاء صورة مصغّرة مخصّصة. في ما يلي مثال على مفتاح تبديل يستخدم رمزًا مخصّصًا لزر التبديل:

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

في هذا التنفيذ، يكون المظهر غير المحدّد هو نفسه المظهر في المثال الوارد في القسم السابق. ومع ذلك، عند تحديد هذا الخيار، يظهر التنفيذ على النحو التالي:

ألوان مخصصة

يوضّح المثال التالي كيفية استخدام مَعلمة الألوان لتغيير لون زر التبديل ومساره، مع الأخذ في الاعتبار ما إذا كان زر التبديل محدّدًا أم لا.

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

تظهر عملية التنفيذ هذه على النحو التالي:

مراجع إضافية

• مستندات Material UI