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

ألوان مخصصة

يوضح المثال التالي كيف يمكنك استخدام معلمة 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 UI