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