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