Jetpack Compose لـ Kotlin: دليل شامل مع أمثلة

ما هو Jetpack Compose ولماذا هو مطلوب؟

Jetpack Compose هو مجموعة أدوات حديثة لإنشاء واجهات المستخدم (UI) لتطبيقات Android، تم تطويرها بواسطة شركة Google. على عكس النهج التقليدي القائم على ترميز XML ونظام View، يستخدم Compose نهجًا تصريحيًا. وهذا يعني أنك تصف كيف يجب أن تبدو واجهة المستخدم في كل حالة من حالات البيانات، بدلاً من وصف سلسلة من الخطوات لتغييرها.

المزايا الرئيسية لـ Jetpack Compose:

\n
• التصريحية: تصف واجهة المستخدم كدالة للحالة. عندما تتغير الحالة، يعيد Compose رسم الأجزاء التي تغيرت فقط تلقائيًا.
\n
• كود أقل: مقارنة بـ XML + View، يكون الكود في Compose عادةً أقصر وأكثر قابلية للقراءة.
\n
• البديهية: يتم استخدام لغة Kotlin، مما يجعل الكود أكثر طبيعية لمطوري Android.
\n
• الأداء: تم تحسين Compose للعمل مع بنيات Android الجديدة ويقلل من عمليات إعادة الرسم.
\n
• التوافق: يمكن دمج Compose تدريجيًا في المشاريع الحالية، باستخدامه مع View التقليدي.
\n

Jetpack Compose ليس مجرد مكتبة، بل هو نظام بيئي كامل، يتضمن أدوات للعمل مع الرسوم المتحركة والتنقل والاختبار وغير ذلك الكثير. إنه مستقبل تطوير Android، وتوصي Google بنشاط بالانتقال إليه.

تثبيت Jetpack Compose

نظرًا لأن Jetpack Compose هي مكتبة لنظام Android، فهي لا تُثبت عبر pip (Python) أو npm (JavaScript). بدلاً من ذلك، يتم إضافتها إلى مشروع Android عبر نظام البناء Gradle. إليك التعليمات خطوة بخطوة:

1. إعداد المشروع في Android Studio

أنشئ مشروع Android جديدًا، واختر قالب "Empty Compose Activity". سيقوم Android Studio تلقائيًا بإعداد جميع التبعيات اللازمة.

2. الإعداد اليدوي (إذا كان المشروع موجودًا بالفعل)

افتح ملف build.gradle.kts (على مستوى المشروع) وتأكد من وجود ما يلي في كتلة plugins:

plugins {\n    id("com.android.application") version "8.2.0" apply false\n    id("org.jetbrains.kotlin.android") version "1.9.20" apply false\n}

ثم افتح ملف build.gradle.kts (على مستوى الوحدة، عادةً app) وأضف:

plugins {\n    id("com.android.application")\n    id("org.jetbrains.kotlin.android")\n}\n\nandroid {\n    namespace = "com.example.myapp"\n    compileSdk = 34\n\n    defaultConfig {\n        applicationId = "com.example.myapp"\n        minSdk = 24\n        targetSdk = 34\n        versionCode = 1\n        versionName = "1.0"\n    }\n\n    buildFeatures {\n        compose = true\n    }\n\n    composeOptions {\n        kotlinCompilerExtensionVersion = "1.5.5"\n    }\n\n    kotlinOptions {\n        jvmTarget = "17"\n    }\n}\n\ndependencies {\n    implementation(platform("androidx.compose:compose-bom:2024.01.00"))\n    implementation("androidx.compose.ui:ui")\n    implementation("androidx.compose.ui:ui-graphics")\n    implementation("androidx.compose.ui:ui-tooling-preview")\n    implementation("androidx.compose.material3:material3")\n    implementation("androidx.activity:activity-compose:1.8.2")\n    debugImplementation("androidx.compose.ui:ui-tooling")\n    debugImplementation("androidx.compose.ui:ui-test-manifest")\n}

بعد مزامنة Gradle، يمكنك البدء في استخدام Jetpack Compose.

بداية سريعة مع مثال كود

أسهل طريقة للبدء هي إنشاء شاشة تحتوي على نص "Hello, World!". للقيام بذلك، في Activity الخاصة بك (أو في أي مكان آخر تستخدم فيه Compose)، قم باستدعاء الدالة setContent:

import android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.