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