Switch

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

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

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

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

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

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

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

في ما يلي مثال بسيط على عنصر Switch القابل للإنشاء.

@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. مفتاح تبديل يحمل رمز محدَّد مخصّص

.

ألوان مخصصة

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

@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 UI