يسمح المكوِّن Switch
للمستخدمين بالتبديل بين حالتين، هما: وضع علامة
م وضع علامة عليهما وعدم وضع علامة عليهما. في تطبيقك، يمكنك استخدام مفتاح تحكّم للسماح للمستخدم بتنفيذ أحد الإجراءات التالية:
- فعِّل أحد الإعدادات أو أوقِفه.
- تفعيل ميزة أو إيقافها
- حدِّد خيارًا.
يتكون المكوِّن من جزأين: الإبهام والمقطع. الإبهام هو الجزء القابل للسحب من المفتاح، والمسار هو الخلفية. يمكن للمستخدم سحب الإبهام إلى اليسار أو اليمين لتغيير حالة المفتاح. يمكنهم أيضًا النقر على مفتاح التبديل للتحقق ومحوه.
التنفيذ الأساسي
يُرجى الاطّلاع على مرجع Switch
للحصول على تعريف كامل لواجهة برمجة التطبيقات. فيما يلي بعض المعلمات الرئيسية التي قد تحتاج إلى استخدامها:
checked
: الحالة الأولية لعملية التبديل.onCheckedChange
: استدعاء يتم استدعاؤه عندما تتغيّر حالة مفتاح التبديل.enabled
: تحدّد هذه السمة ما إذا كان مفتاح التبديل مفعَّلاً أو غير مفعَّل.colors
: الألوان المستخدَمة لمفتاح التبديل
المثال التالي هو الحد الأدنى لتنفيذ عنصر Switch
القابل للإنشاء.
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
تظهر طريقة التنفيذ هذه على النحو التالي عند إزالة العلامة من المربّع:
هذا هو الشكل الذي يظهر عند وضع علامة عليه:
عملية التنفيذ المتقدّمة
المعلمات الأساسية التي قد ترغب في استخدامها عند تنفيذ مفتاح تبديل أكثر تقدمًا هي التالية:
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 } ) }
وفي طريقة التنفيذ هذه، يكون المظهر الذي لم يتم وضع علامة فيه هو نفسه المثال الوارد في القسم السابق. مع ذلك، عند التحقّق، تظهر طريقة التنفيذ هذه على النحو التالي:
ألوان مخصصة
يوضح المثال التالي كيف يمكنك استخدام معلمة 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, ) ) }
تظهر طريقة التنفيذ هذه على النحو التالي: