Jetpack Compose في تطوير الأجهزة المحمولة: ما هو، المفاهيم الأساسية وكيف يعمل

أساسيات Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — تعليق توضيحي يحول الدالة إلى Composable. دوال Composable هي اللبنات الأساسية لواجهة المستخدم. لا تُرجع View، بل تُصدر عناصر إلى Composition. Composition — شجرة واجهة مستخدم مبنية من استدعاءات دوال Composable. يقارن Compose الشجرة الجديدة بالقديمة ويُحدّث الأجزاء المتغيرة فقط.

Recomposition

Recomposition — إعادة تشغيل دوال Composable عند تغيير الحالة. يتتبع Compose أي الحالات تُقرأ في كل دالة. عندما تتغير حالة، يعيد Compose تشغيل فقط الدوال التي تقرأ تلك الحالة (Smart Recomposition). إعادة التركيب متفائلة: قد تعمل عدة مرات، لذلك يجب أن تكون الدوال نقية (بدون تأثيرات جانبية). التأثيرات الجانبية توضع في LaunchedEffect أو DisposableEffect. دوال Composable لا يمكن أن تكون suspend. تُستدعى من دوال Composable أخرى. ترتيب الاستدعاء غير مضمون (قد يعيد Compose الترتيب).

// مثال على Composable مع State Hoisting و LazyColumn
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — شجرة تعريفية. Recomposition — إعادة تشغيل ذكية. توصي IT Sectr بمراقبة استقرار الأنواع — الأنواع غير المستقرة تسبب إعادة تركيب مفرطة.

CompositionLocal

CompositionLocal — تمرير ضمني للبيانات في Compose. مماثل لـ @Environment في SwiftUI. CompositionLocalProvider — تعيين قيمة. current — قراءة. يُستخدم لـ: Theme (MaterialTheme), ContentScale, Density. CompositionLocal ثابت — للتكوين بدون تغييرات. CompositionLocal ديناميكي — للقيم المتغيرة (السمات). توصي IT Sectr باستخدام CompositionLocal للتكوينات العامة والمعاملات الصريحة للبيانات.

الحالة (remember, mutableStateOf, State Hoisting)

remember — يحتفظ بالقيمة بين عمليات إعادة التركيب. mutableStateOf — يُنشئ حالة قابلة للمراقبة (MutableState<T>). عند التغيير، يُطلق إعادة التركيب. State Hoisting — نمط: تُرفع الحالة إلى المكون الأصلي، ويتلقى المكون الفرعي القيمة + رد النداء. State (غير قابل للتغيير) — للقراءة فقط. MutableState — قراءة + كتابة. rememberSaveable — يستمر أثناء التدوير/إنهاء العملية.

State Hoisting

State Hoisting — مبدأ: state down, events up. تُخزّن الحالة في المكون الأصلي وتُمرّر إلى المكونات الفرعية عبر المعاملات. تُبلغ المكونات الفرعية عن التغييرات عبر لامبدا (رد نداء). الفوائد: إعادة الاستخدام، قابلية الاختبار، مصدر واحد للحقيقة. مثال: بدلاً من أن يخزن MyTextField حالته الخاصة، يخزن المكون الأصلي السلسلة ويمرّرها عبر value + onValueChange.

الحالة المشتقة

derivedStateOf — حالة محسوبة، يُعاد حسابها فقط عند تغيير التبعيات. يُستخدم للتصفية والتحويل والتحقق. snapshotFlow — يحول State إلى Flow. يُستخدم للسلاسل التفاعلية. collectAsState — يجمع Flow في State داخل Composable. توصي IT Sectr باستخدام derivedStateOf للقيم المحسوبة و snapshotFlow لربط State مع coroutines.

الحاويات (Column, Row, Box, LazyColumn)

Column — تخطيط عمودي (مماثل لـ LinearLayout عمودي). Row — تخطيط أفقي. Box — تخطيط مكدّس (مماثل لـ FrameLayout). LazyColumn — قائمة عمودية قابلة للتمرير مع تحميل كسول. LazyRow — قائمة أفقية قابلة للتمرير. Scaffold — الهيكل الرئيسي للشاشة: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — الشريط العلوي. BottomNavigation — التنقل السفلي (NavigationBar في Material 3). Modifier — سلسلة: .fillMaxWidth().padding(8.dp).clickable { }. ترتيب المعدّلات مهم — كل منها يُنشئ غلافًا جديدًا.

تحسين LazyColumn

LazyColumn — قائمة افتراضية. يعرض العناصر المرئية فقط. التحسين: 1) key — مفتاح فريد للعنصر، 2) contentType — تجميع العناصر حسب النوع، 3) itemContent — تقليل إعادة التركيب داخل العنصر، 4) LazyVerticalGrid / LazyHorizontalGrid — للشبكات. LazyLayout — تخطيط كسول مخصص. Paging 3 + Compose — ترقيم الصفحات عبر collectAsLazyPagingItems. توصي IT Sectr باستخدام key(item) لجميع LazyColumn لإعادة تركيب قابلة للتنبؤ.

التنقل (NavController, NavHost)

Navigation Compose — مكتبة التنقل. NavController — يدير مكدس الوجهات. NavHost — حاوية رسم بياني للتنقل. composable("route") — تسجيل وجهة. navController.navigate("route") — التنقل. popBackStack() — العودة. الوسائط: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). الروابط العميقة عبر intentFilter. BottomNavigation — التكامل مع NavController: NavBarItem → navigate + popUpTo.

التنقل المتقدم

مكدسات رجوع متعددة — مكدس رجوع منفصل لكل علامة تبويب في BottomNavigation. SavedStateHandle — الحفاظ على الوسائط أثناء إنهاء العملية. NavArgs — وسائط آمنة النوع (Kotlin 2.0+). الروابط العميقة — مخططات URL للروابط الخارجية. إيماءة الرجوع التنبؤية (Android 14+) — دعم إيماءة الرجوع مع معاينة. توصي IT Sectr باستخدام NavArgs لأمان النوع ومكدسات رجوع متعددة لـ BottomNavigation.

التأثيرات (LaunchedEffect, DisposableEffect)

LaunchedEffect — يُطلق كتلة suspend في Composition. تُلغى عند مغادرة Composition. يُعاد تشغيلها عند تغيير المفاتيح. تُستخدم لـ: تحميل البيانات، المؤقتات، الرسوم المتحركة. DisposableEffect — للموارد التي تتطلب تنظيفًا: onDispose { } — إلغاء الاشتراك من المستمعين، إغلاق الاتصالات. SideEffect — تأثير متزامن (كل إعادة تركيب). يُستخدم لـ: التسجيل، المزامنة مع كود غير Compose. توصي IT Sectr باستخدام LaunchedEffect لتحميل البيانات و DisposableEffect للتنظيف.

Compose — دالة + معدّل. SwiftUI — struct + معدّل. المفاهيم متشابهة، البنية مختلفة. توصي IT Sectr بتعلم كلا الإطارين — فهم أحدهما يُسهّل تعلم الآخر.

أنماط التأثيرات

rememberCoroutineScope — الوصول إلى CoroutineScope خارج LaunchedEffect (مثل عند النقر على زر). snapshotFlow — تحويل State إلى Flow للسلاسل. produceState — تحويل مصدر غير Compose إلى State. animateFloatAsState و animateColorAsState — رسوم متحركة عبر التأثيرات. توصي IT Sectr باستخدام rememberCoroutineScope لأحداث واجهة المستخدم و LaunchedEffect للتحميل التلقائي.

السمات (MaterialTheme, Material3)

MaterialTheme — السمة العامة لـ Compose. الألوان، الطباعة، الأشكال. MaterialTheme { } — يغلف التطبيق بأكمله. Material3 (M3) — نظام تصميم Google 2023+. Dynamic Colors — التكيف مع الخلفية (Android 12+). TextStyle — تكوين النص: fontSize, fontWeight, lineHeight. Shape — تدوير الزوايا. Elevation — الظلال. توصي IT Sectr باستخدام Material3 افتراضيًا و Dynamic Colors للأجهزة الحديثة.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

الرسوم المتحركة (animate*, AnimatedVisibility)

animateFloatAsState — يحرّك قيمة Float. animateColorAsState — يحرّك اللون. animateDpAsState — يحرّك الحجم. AnimatedVisibility — إظهار/إخفاء مع .animateEnterExit(). AnimatedContent — رسم متحرك عند تغيير المحتوى (crossfade, slide). updateTransition — رسم متحرك يعتمد على حالة enum. Animatable — رسم متحرك مخصص عبر واجهة Animatable. توصي IT Sectr باستخدام AnimatedVisibility للقوائم و AnimatedContent لانتقالات الشاشة.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

الاختبار (Compose UI Test)

Compose UI Test — اختبار شاشات Compose. createComposeRule() — قاعدة JUnit. setContent { } — تعيين Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — البحث عن العناصر. performClick, performTextInput, performScrollTo — الإجراءات. assertIsDisplayed, assertTextEquals — التأكيدات. Semantics — شجرة Semantics لإمكانية الوصول والاختبارات. IdlingResource — انتظار العمليات غير المتزامنة. اختبارات لقطات الشاشة — Papercuts, Roborazzi. توصي IT Sectr باختبارات UI لكل شاشة واختبارات وحدة لـ ViewModel.

WindowSizeClass — التكيف مع حجم الشاشة (Compact, Medium, Expanded). مرتبط بتخطيطات Material3 المتجاوبة. يُستخدم في Adaptive Navigation Suite للتبديل التلقائي من BottomNavigation إلى NavigationRail. توصي IT Sectr باستخدام WindowSizeClass لتكييف Compass مع الأجهزة اللوحية وسطح المكتب.

Paging 3 + Compose — مكتبة ترقيم الصفحات من Google. PagingData — تدفق الصفحات. PagingConfig — الإعدادات (pageSize, prefetchDistance). collectAsLazyPagingItems() — التجميع في Compose. PagingSource — مصدر مخصص. RemoteMediator — تحميل هجين (شبكة + قاعدة بيانات). Paging 3 هو المعيار للقوائم ذات التمرير اللانهائي في Compose.