Jetpack Compose: الأساسيات، دوال Composable والحالة

ما هو Jetpack Compose؟

Jetpack Compose هو إطار عمل واجهة مستخدم من Google مبني على مبادئ البرمجة التفاعلية. بدلاً من Activity مع تخطيط XML و FragmentManager و ViewBinding، يصف المطور الواجهة من خلال دوال Kotlin مع التعليق التوضيحي @Composable. لا يستخدم Compose LayoutInflater — واجهة المستخدم هي دوال Kotlin نقية تُترجم إلى bytecode. يتكون الإطار من عدة مكتبات: Compose UI (المكونات الأساسية Text, Button, Column, Row)، Compose Foundation (Material Design, Gestures, Focus)، Compose Material3 (Material You مع Dynamic Colors) و Compose Runtime (State, Side Effects, Coroutines). يعمل Compose على Android API 21+ (Android 5.0) ومتوافق تمامًا مع كود View/XML الموجود من خلال ComposeView — محوّل AndroidView.

Compose مقابل View System

View System (2008) يستخدم تسلسلاً هرميًا لكائنات View مع إدارة يدوية: ينشئ المطور تخطيط XML، ويجد Views عبر findViewById، وينفذ Adapter لـ RecyclerView ويستدعي notifyDataSetChanged عند تغيير البيانات. يصف Compose واجهة المستخدم وظيفيًا: عندما تتغير الحالة، يعيد الإطار تشغيل (recompose) دوال Composable المتغيرة فقط، ويحسب الفرق (diff) ويطبق الحد الأدنى من التغييرات على Canvas. أداء Compose مشابه لـ View System، وفي سيناريوهات القوائم المعقدة (LazyColumn) غالبًا ما يتفوق على RecyclerView بفضل تخطي العناصر غير الضرورية عبر معامل key. في IT Sectr، يُستخدم Compose للوحدات الجديدة من تطبيقات Android مع minSdk 24+.

دوال Composable: اللبنات الأساسية لواجهة المستخدم

@Composable — تعليق توضيحي يحول دالة Kotlin عادية إلى لبنة بناء لواجهة المستخدم. يمكن لدوال Composable استدعاء دوال Composable أخرى، لتكوين شجرة من المكونات. على عكس View، دوال Composable ليس لها حالة افتراضيًا — فهي عديمة الحالة (stateless) وتُعاد رسمها مع كل تغيير في معاملات الإدخال أو State. يقوم Compose Compiler بتحويل دوال @Composable إلى كود يمكن مقاطعته واستئنافه (positional memoization) — مما يسمح لـ Compose بإعادة تشغيل الأجزاء المتغيرة فقط دون إعادة بناء الشجرة بالكامل.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

تستقبل الدالة UserProfile name و avatarUrl كمعاملات، وتبني صفًا مع صورة رمزية واسم. Modifier.fillMaxWidth() يمدد المكون عبر العرض بالكامل، .padding(16.dp) يضيف حشوة. يستخدم MaterialTheme.typography.titleMedium نمط النظام Material 3. عندما تتغير معاملات name أو avatarUrl، يعيد Compose تشغيل UserProfile — إعادة إنشاء المكون بقيم جديدة.

State و Recomposition في Jetpack Compose

State في Compose هو أي قيمة يؤدي تغييرها إلى إعادة التركيب (إعادة تشغيل) دوال @Composable المعتمدة. الطريقة الأساسية هي mutableStateOf()، التي تنشئ MutableState<T> مع دعم نظام snapshot في Compose. Snapshot هي آلية تتبع التغييرات: عند كتابة State، يضع Compose علامة على Snapshot الحالي كـ dirty، ويقوم مُجدوِل إعادة التركيب بإعادة تشغيل دوال Composable التي تقرأ هذا State فقط. للمجموعات القابلة للمراقبة استخدم mutableStateListOf() و mutableStateMapOf(). يدعم Compose State من مكونات Lifecycle-Aware عبر collectAsState() لـ Kotlin Flow و observeAsState() لـ LiveData.

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

ينشئ الكود زر "Like" مع حالة liked (Boolean) و count (Int) مخزنتين عبر mutableStateOf(). عند الضغط، يتم عكس liked ويزداد/ينقص العداد — يقوم Compose تلقائيًا بإعادة تشغيل LikeButton. يسمح المفوض by باستخدام State كمتغير عادي: liked = !liked بدلاً من liked.value = !liked.value. يتغير لون الزر تفاعليًا بين primary (تم الإعجاب) و surfaceVariant (لم يتم الإعجاب).

remember: التخزين المؤقت بين عمليات إعادة التركيب

remember — دالة Compose تخزن قيمة مؤقتًا بين عمليات إعادة التركيب. بدون remember، كل إعادة تشغيل لدالة Composable تنشئ حالة جديدة (mutableStateOf) — وهذا يعطل منطق التطبيق: عند تدوير الشاشة أو تغيير State الأب، يتم إعادة تعيين العداد. تقبل remember تعبير lambda للحساب وتحسب القيمة فقط في أول تركيب؛ في المرات التالية تعيد النتيجة المخزنة مؤقتًا. لإعادة تعيين التخزين المؤقت استخدم remember(key) — يحدد المفتاح متى يُعاد حساب القيمة. remember(key1, key2) يعيد الحساب عند تغيير أي مفتاح. للحالات طويلة العمر (التي تتحمل تدوير الشاشة) استخدم rememberSaveable — شبيه remember مع الحفظ في Bundle عبر SavedStateHandle.

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Elapsed: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable يحتفظ بـ seconds عند تدوير الشاشة (تغيير الإعدادات). يقوم LaunchedEffect بتشغيل coroutine يزيد seconds كل ثانية. عند إعادة تركيب TimerScreen (كل ثانية) لا يتم إعادة تعيين seconds بفضل rememberSaveable. استخدم remember العادي للحالة التي لا يجب أن تتحمل تغييرات الإعدادات (مثلاً، أعلام الرسوم المتحركة).

Modifier: سلسلة إعدادات Composable

Modifier — كائن حاوية غير قابل للتغيير يطبق نمط Builder لتكوين مظهر وسلوك وتخطيط مكونات Composable. كل استدعاء لطريقة Modifier (.padding(), .width(), .clickable(), .background()) يعيد Modifier جديد مع العنصر المضاف. ترتيب المعدّلات مهم: .padding(16.dp).clickable { } — تُطبق الحشوة قبل معالج النقر، clickable يتتبع المساحة بأكملها بما في ذلك الحشوة. .clickable { }.padding(16.dp) — المساحة بأكملها قبل الحشوة قابلة للنقر، الحشوة تزيح المحتوى للداخل. يدعم Modifier التطبيقات المخصصة عبر then(otherModifier) و compositionLocal للوصول إلى إعدادات الأب.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Card clicked") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "UI تعريفية لنظام Android مع State و Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

يُظهر CardExample سلسلة Modifier: fillMaxWidth + padding + clickable. Card هو مكون Material3 مع إعدادات elevation و colors خاصة به. يحتوي Column المتداخل على حشوة داخلية 16dp. يقوم Compose Material3 بتكييف الألوان تلقائيًا مع Dynamic Color (Material You) على Android 12+. Card هو واحد من أكثر من 30 مكون Material3 مدمج في Compose.

رفع الحالة State hoisting وهندسة Compose

State hoisting — نمط رفع الحالة من دالة Composable إلى المستدعي، مما يجعل الدالة عديمة الحالة (stateless). المكون عديم الحالة يستقبل البيانات واستدعاءات回调 عبر المعاملات دون امتلاك State بنفسه. هذا يحسن قابلية إعادة الاستخدام والاختبار: يمكن استدعاء المكون مع States مختلفة واختباره في preview. توصي Google بالهندسة: ViewModel + StateFlow (أو MutableStateFlow) + collectAsState() في Compose. يرفع ViewModel الحالة إلى مستوى الشاشة، ويقوم Compose بعرضها. تعالج التأثيرات الجانبية (LaunchedEffect, DisposableEffect) الأحداث لمرة واحدة.