شرح Day Night Switch في Jetpack Compose مع مثال عملي من GitHub
إذا كنت تعمل على تطبيق باستخدام Jetpack Compose أو حتى Compose Multiplatform، فمن المؤكد أنك تحتاج إلى دعم الوضع الليلي (Dark Mode) والنهاري (Light Mode).
في هذا المقال سنقوم بشرح كود حقيقي من GitHub لملف DayNightSwitch.kt، وكيف يتم تنفيذ زر احترافي للتبديل بين الوضعين بطريقة سلسة وحديثة.
سنفهم الفكرة، طريقة العمل، وأفضل الممارسات المستخدمة داخل الكود.
ما هو Day Night Switch؟
في Jetpack Compose يتم ذلك عادة باستخدام حالة (State) يتم تغييرها عند الضغط على زر التبديل.
عنصر Switch في Compose هو عنصر UI بسيط يسمح بالتبديل بين حالتين (true / false) :contentReference[oaicite:0]{index=0}
فكرة كود DayNightSwitch.kt
State Management + Recomposition
عندما تتغير قيمة الحالة (مثل isDarkMode)، يقوم Compose بإعادة رسم الواجهة تلقائيًا (Recomposition).
وهذا هو أساس بناء واجهات تفاعلية في Compose :contentReference[oaicite:1]{index=1}
كيف يعمل الكود؟
1. الحالة (State)
يتم تخزين وضع الثيم (فاتح / داكن) داخل متغير باستخدام:
var isDarkMode by remember { mutableStateOf(false) }
هذا المتغير يتحكم في شكل الواجهة بالكامل.
2. عنصر Switch
يتم استخدام Switch للتبديل بين الوضعين:
Switch(
checked = isDarkMode,
onCheckedChange = { isDarkMode = it }
)
عند تغيير الحالة، يتم تحديث القيمة مباشرة.
3. إعادة بناء الواجهة (Recomposition)
عند تغيير state، يقوم Compose بإعادة رسم العناصر المتأثرة فقط، وليس كامل الواجهة.
وهذا يجعل الأداء عالي جدًا.
الجزء المميز في الكود (Animation + UI)
– أنيميشن سلسة عند التبديل – تغيير الألوان حسب الحالة – تحريك الأيقونات (شمس / قمر) – تصميم احترافي مخصص
وهذا يجعل التجربة أفضل بكثير من Switch التقليدي.
ربط Switch مع الثيم (Theme)
MyAppTheme(
darkTheme = isDarkMode
) {
AppContent()
}
عند تغيير القيمة، يتم تطبيق الثيم مباشرة على كامل التطبيق.
في Compose يتم تعريف الألوان لكل وضع داخل Theme.kt :contentReference[oaicite:2]{index=2}
لماذا هذا الأسلوب احترافي؟
الحالة تتحكم في السلوك بدون تعقيد.
تجربة مستخدم ممتازة
بفضل الأنيميشن والتفاعل.
أداء عالي
Compose يعيد رسم العناصر المتغيرة فقط.
قابلية التوسع
يمكنك إضافة حالات أو ثيمات بسهولة.
أفضل استخدامات Day Night Switch
عيوب أو تحديات التطبيق
إذا استخدمت Animation متقدمة قد يزيد التعقيد.
إدارة الحالة
يجب حفظ الحالة (مثلاً باستخدام DataStore) حتى لا تضيع عند إعادة تشغيل التطبيق.
التوافق مع النظام
يجب تحديد هل تعتمد على إعدادات النظام أو المستخدم.
نصائح احترافية عند التطبيق
الخلاصة
يعتمد على مفهوم بسيط:
State → Change → Recomposition → UI Update
ولكن عند تطبيقه بشكل صحيح مع Animation وتصميم جيد، يمكنك بناء تجربة مستخدم قوية جدًا.
إذا كنت تبني تطبيق حديث باستخدام Compose، فإن إضافة Day Night Switch ليس مجرد ميزة إضافية، بل عنصر أساسي لتحسين تجربة المستخدم وجعل التطبيق أكثر احترافية.
لمزيد من المقالات : كيفية تثبيت MySQL و MySQL Workbench على macOS من الموقع الرسمي خطوة بخطوة
