موبائل ڈویلپمنٹ میں Jetpack Compose: یہ کیا ہے، کلیدی تصورات اور یہ کیسے کام کرتا ہے

Jetpack Compose کی بنیادی باتیں (@Composable, Composition, Recomposition)

@Composable — تشریح جو فنکشن کو Composable میں تبدیل کرتی ہے۔ Composable فنکشنز UI کے تعمیری بلاکس ہیں۔ وہ View واپس نہیں کرتے، بلکہ Composition میں عناصر خارج کرتے ہیں۔ Composition — Composable فنکشن کالز سے بنایا گیا UI درخت۔ Compose نئے درخت کا پرانے سے موازنہ کرتا ہے اور صرف تبدیل شدہ حصوں کو اپ ڈیٹ کرتا ہے۔

Recomposition

Recomposition — حالت تبدیل ہونے پر Composable فنکشنز کا دوبارہ شروع ہونا۔ Compose ٹریک کرتا ہے کہ ہر فنکشن میں کون سی حالتیں پڑھی جاتی ہیں۔ جب کوئی حالت تبدیل ہوتی ہے، Compose صرف ان فنکشنز کو دوبارہ شروع کرتا ہے جو اس حالت کو پڑھتے ہیں (Smart Recomposition)۔ Recomposition پرامید ہے: کئی بار چل سکتا ہے، اس لیے فنکشنز خالص ہونے چاہئیں (بغیر ضمنی اثرات کے)۔ ضمنی اثرات LaunchedEffect یا DisposableEffect میں جاتے ہیں۔ Composable فنکشنز suspend نہیں ہو سکتے۔ وہ دوسرے Composable فنکشنز سے کال کیے جاتے ہیں۔ کال کی ترتیب کی ضمانت نہیں ہے (Compose دوبارہ ترتیب دے سکتا ہے)۔

// State Hoisting اور LazyColumn کے ساتھ Composable مثال
@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 میں ڈیٹا کا غیر واضح پاسنگ۔ SwiftUI میں @Environment جیسا۔ 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 — Composable کے اندر Flow کو State میں جمع کرتا ہے۔ IT Sectr حساب شدہ اقدار کے لیے derivedStateOf اور State کو coroutines سے جوڑنے کے لیے snapshotFlow استعمال کرنے کی تجویز کرتا ہے۔

کنٹینرز (Column, Row, Box, LazyColumn)

Column — عمودی ترتیب (LinearLayout عمودی جیسا)۔ Row — افقی ترتیب۔ Box — اسٹیکنگ ترتیب (FrameLayout جیسا)۔ LazyColumn — سست لوڈنگ کے ساتھ عمودی اسکرول کرنے والی فہرست۔ LazyRow — افقی اسکرول کرنے والی فہرست۔ Scaffold — مرکزی اسکرین کا ڈھانچہ: TopAppBar, BottomBar, FloatingActionButton, Snackbar۔ TopAppBar — اوپر والی بار۔ BottomNavigation — نیچے کی نیویگیشن (Material 3 میں NavigationBar)۔ Modifier — زنجیر: .fillMaxWidth().padding(8.dp).clickable { }۔ موڈیفائر کی ترتیب اہم ہے — ہر ایک نیا ریپر بناتا ہے۔

LazyColumn کی اصلاح

LazyColumn — ورچوئلائزڈ فہرست۔ صرف نظر آنے والے عناصر پیش کرتا ہے۔ اصلاح: 1) key — آئٹم کے لیے منفرد کلید، 2) contentType — آئٹمز کو قسم کے مطابق گروپ کرنا، 3) itemContent — آئٹم کے اندر دوبارہ ترتیب کو کم سے کم کرنا، 4) LazyVerticalGrid / LazyHorizontalGrid — گرڈز کے لیے۔ LazyLayout — حسب ضرورت سست ترتیب۔ Paging 3 + Compose — collectAsLazyPagingItems کے ذریعے صفحہ بندی۔ IT Sectr پیش گوئی کے قابل دوبارہ ترتیب کے لیے تمام LazyColumn میں key(item) استعمال کرنے کی تجویز کرتا ہے۔

نیویگیشن (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 — Composition میں suspend بلاک شروع کرتا ہے۔ Composition چھوڑنے پر منسوخ ہو جاتا ہے۔ keys تبدیل ہونے پر دوبارہ شروع ہوتا ہے۔ اس کے لیے استعمال ہوتا ہے: ڈیٹا لوڈنگ، ٹائمر، اینیمیشن۔ DisposableEffect — ان وسائل کے لیے جنہیں صفائی کی ضرورت ہے: onDispose { } — سننے والوں سے ان سبسکرائب کرنا، کنکشن بند کرنا۔ SideEffect — ہم آہنگ اثر (ہر دوبارہ ترتیب پر)۔ اس کے لیے استعمال ہوتا ہے: لاگنگ، غیر Compose کوڈ کے ساتھ ہم آہنگی۔ IT Sectr ڈیٹا لوڈنگ کے لیے LaunchedEffect اور صفائی کے لیے DisposableEffect استعمال کرنے کی تجویز کرتا ہے۔

Compose — فنکشن + موڈیفائر۔ SwiftUI — struct + موڈیفائر۔ تصورات ایک جیسے ہیں، نحو مختلف ہے۔ IT Sectr دونوں فریم ورک سیکھنے کی تجویز کرتا ہے — ایک کو سمجھنا دوسرے کو سیکھنا آسان بناتا ہے۔

اثرات کے نمونے

rememberCoroutineScope — LaunchedEffect کے باہر CoroutineScope تک رسائی (مثلاً، بٹن کلک پر)۔ snapshotFlow — زنجیروں کے لیے State کو Flow میں تبدیل کرنا۔ produceState — غیر Compose ماخذ کو State میں تبدیل کرنا۔ animateFloatAsState اور animateColorAsState — اثرات کے ذریعے اینیمیشن۔ IT Sectr UI واقعات کے لیے 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 ٹیبلیٹ اور ڈیسک ٹاپ Compose موافقت کے لیے WindowSizeClass استعمال کرنے کی تجویز کرتا ہے۔

Paging 3 + Compose — Google کی صفحہ بندی لائبریری۔ PagingData — صفحہ سٹریم۔ PagingConfig — ترتیبات (pageSize, prefetchDistance)۔ collectAsLazyPagingItems() — Compose میں جمع کرنا۔ PagingSource — حسب ضرورت ماخذ۔ RemoteMediator — ہائبرڈ لوڈنگ (نیٹ ورک + ڈیٹا بیس)۔ Paging 3 Compose میں لامحدود اسکرول فہرستوں کے لیے معیار ہے۔