يسمح المكوِّن Switch
للمستخدمين بالتبديل بين حالتين: وضع علامة
وإزالة العلامة. يمكنك استخدام مفتاح تحكّم في تطبيقك للسماح للمستخدم بتنفيذ أحد الإجراءات التالية:
التالي:
- فعِّل أحد الإعدادات أو أوقِفه.
- تفعيل ميزة أو إيقافها
- حدِّد خيارًا.
يتكون المكوِّن من جزأين: الإبهام والمقطع. الإبهام هو قابل للسحب من المبدل، والمسار هو الخلفية. يمكن للمستخدم سحب الإبهام إلى اليسار أو اليمين لتغيير حالة المفتاح. يمكنهم أيضًا النقر على التبديل للتحقق منها ومحوها.
![أمثلة على مكوِّن التبديل في الوضعَين الفاتح والداكن.](https://developer.android.com/static/develop/ui/compose/images/components/switches.png?authuser=2&hl=ar)
التنفيذ الأساسي
يُرجى الاطّلاع على مرجع Switch
للحصول على تعريف كامل لواجهة برمجة التطبيقات. فيما يلي
بعض المعلمات الرئيسية التي قد تحتاج إلى استخدامها:
checked
: الحالة الأولية لعملية التبديل.onCheckedChange
: استدعاء يتم استدعاؤه عند إجراء حالة التبديل بين التغييرات.enabled
: تحدّد هذه السمة ما إذا كان مفتاح التبديل مفعَّلاً أو غير مفعَّل.colors
: الألوان المستخدَمة لمفتاح التبديل
المثال التالي هو الحد الأدنى لتنفيذ عنصر Switch
القابل للإنشاء.
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
تظهر طريقة التنفيذ هذه على النحو التالي عند إزالة العلامة من المربّع:
![مفتاح تحكّم أساسي غير محدَّد.](https://developer.android.com/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=2&hl=ar)
هذا هو الشكل الذي يظهر عند وضع علامة عليه:
![مفتاح تحكُّم أساسي تم تحديده.](https://developer.android.com/static/develop/ui/compose/images/components/switch.png?authuser=2&hl=ar)
عملية التنفيذ المتقدّمة
المعلمات الأساسية التي قد ترغب في استخدامها عند تنفيذ معلمة أكثر تقدمًا ما يلي:
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 } ) }
في عملية التنفيذ هذه، يكون المظهر الذي لم يتم وضع علامة فيه هو نفسه المثال في القسم السابق. ومع ذلك، عند وضع علامة في المربّع، تظهر طريقة التنفيذ هذه على النحو التالي: التالي:
![مفتاح تبديل يستخدم المَعلمة SpamContent لعرض رمز مخصّص عند وضع علامة عليه](https://developer.android.com/static/develop/ui/compose/images/components/switch-icon.png?authuser=2&hl=ar)
ألوان مخصصة
يوضح المثال التالي كيف يمكنك استخدام معلمة 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, ) ) }
تظهر طريقة التنفيذ هذه على النحو التالي:
![مفتاح تبديل يستخدم مَعلمة الألوان لعرض مفتاح تبديل بألوان مخصّصة لكل من رمز الإبهام والمعيار.](https://developer.android.com/static/develop/ui/compose/images/components/switch-colors.png?authuser=2&hl=ar)