Switch

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

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

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

الشكل 1. مكوّن التبديل

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

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

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

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

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

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

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

الشكل 2. مفتاح تبديل لم يتم وضع علامة في المربّع بجانبه

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

الشكل 3. مفتاح تحكّم تم وضع علامة عليه

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

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

• ‫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

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

الشكل 4. مفتاح تبديل به رمز مخصّص تم وضع علامة عليه

ألوان مخصصة

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

@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

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

الشكل 5. مفتاح تبديل بألوان مخصّصة

مصادر إضافية

• مستندات واجهة مستخدم Material