Switch

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

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

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

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

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

المثال التالي هو أدنى حدّ لتنفيذ Switch composable.

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

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

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

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

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

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

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

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

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

@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

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

ألوان مخصصة

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

@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