Jetpack Compose: یہ کیا ہے، کلیدی تصورات اور Composable فنکشنز

Jetpack Compose کیا ہے؟

Jetpack Compose Android یوزر انٹرفیس بنانے کے لیے Google کا ایک اعلامیاتی فریم ورک ہے، جس کا اعلان 2019 میں کیا گیا تھا اور 2021 میں مستحکم ریلیز تک پہنچا۔ پرانے View System (XML لے آؤٹ + Activity/Fragment) کے برعکس، Compose تشریح شدہ Kotlin فنکشنز — @Composable — استعمال کرتا ہے۔ انٹرفیس مکمل طور پر Kotlin میں بیان کیا جاتا ہے: XML اور کوڈ کے درمیان کوئی علیحدگی نہیں ہے۔ اس نے XML اور Kotlin میں مماثل ID سے متعلق خرابیوں کے طبقے کو ختم کر دیا (type-safe synthetic ری فیکٹرنگ میں مدد نہیں کرتا تھا)۔

Compose اپنے رینڈرنگ سسٹم Canvas پر بنایا گیا ہے، جو View درجہ بندی سے منسلک نہیں ہے۔ ہر Composable View سسٹم کے onMeasure/onDraw کو نظرانداز کرتے ہوئے براہ راست Canvas پر کھینچتا ہے۔ یہ پیچیدہ اسکرینوں پر کارکردگی میں اضافہ فراہم کرتا ہے: Google ٹیسٹوں (2023) میں، 200 عناصر والی Compose اسکرین RecyclerView + ViewHolder پر اسی طرح کی اسکرین سے 40% تیزی سے رینڈر ہوئی۔

کم از کم تقاضے اور مطابقت

Compose کو minSdk 21 (Android 5.0) اور Kotlin 1.9+ درکار ہے۔ Compose BOM (Bill of Materials) تمام Compose لائبریریوں کے ورژن کو ہم آہنگ کرتا ہے۔ فریم ورک موجودہ View System کوڈ کے ساتھ مطابقت رکھتا ہے: Compose XML لے آؤٹ میں ComposeView کے ذریعے شامل کیا جاتا ہے، اور پرانی View کو Compose درجہ بندی میں AndroidView کے ذریعے شامل کیا جاتا ہے۔ Google Play Console (2025) کے مطابق، Android 5.0+ فعال آلات کا 97% احاطہ کرتا ہے، لہذا زیادہ تر منصوبوں کے لیے مطابقت کوئی پابندی نہیں ہے۔

Composable فنکشنز اور کمپوزیشن

@Composable ایک تشریح ہے جو ایک عام Kotlin فنکشن کو UI بلڈنگ بلاک میں تبدیل کرتی ہے۔ Composable فنکشن بیان کرتا ہے کہ انٹرفیس کا ایک ٹکڑا کیسا نظر آنا چاہیے — متن، بٹن، فہرست۔ قدر واپس کرنے کے بجائے، فنکشن کمپوزیشن میں UI اجزاء خارج کرتا ہے (emit)۔ یہ ایک جنریٹر کی طرح ہے: ہر فنکشن کال ہونے پر اسکرین پر عناصر شامل کرتا ہے۔

@Composable
fun ProfileCard(name: String, avatarUrl: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            AsyncImage(
                model = avatarUrl,
                contentDescription = "اوتار",
                modifier = Modifier.size(48.dp).clip(CircleShape)
            )
            Spacer(Modifier.width(12.dp))
            Text(
                text = name,
                style = MaterialTheme.typography.titleMedium
            )
        }
    }
}

ProfileCard فنکشن پیرامیٹرز (name, avatarUrl) لیتا ہے اور Card → Row → AsyncImage + Text خارج کرتا ہے۔ کمپوزیشن ایک ہی پاس میں خارج کردہ اجزاء کا درخت ہے۔ اگر پیرامیٹرز تبدیل نہیں ہوئے، Compose فنکشن کال کو چھوڑ دیتا ہے (recomposition skip)۔ اگر صرف name تبدیل ہوا، صرف Text کو کال کیا جائے گا، باقی عناصر دوبارہ نہیں کھینچے جائیں گے۔ یہ ذہین دوبارہ کمپوزیشن دستی View System اصلاح کے مقابلے میں Compose کا کلیدی کارکردگی کا فائدہ ہے۔

سلاٹ اور Content Lambda

Composable فنکشنز فعال طور پر سلاٹ استعمال کرتے ہیں — trailing lambda، content: @Composable (() -> Unit)۔ یہ کنٹینر بنانے کی اجازت دیتا ہے: Card، Column، Row content lambda قبول کرتے ہیں، اور مواد سلاٹ میں شامل ہو جاتا ہے۔ Slot API نے android:layout_gravity جیسی XML خصوصیات کو تبدیل کر دیا — اب چائلڈ عناصر کی پوزیشننگ مواد کے بلاک کے اندر Kotlin کوڈ کے ذریعے سیٹ کی جاتی ہے۔

Compose میں حالت کا انتظام

Compose میں حالت (State) کوئی بھی قدر ہے جو وقت کے ساتھ تبدیل ہو سکتی ہے۔ جب حالت تبدیل ہوتی ہے، Compose اس حالت کو پڑھنے والے تمام اجزاء کے لیے دوبارہ کمپوزیشن طے کرتا ہے۔ طریقہ کار React hooks سے ملتا جلتا ہے: mutableStateOf MutableState<T> واپس کرتا ہے، .value پڑھنا خود بخود موجودہ کمپوزیشن کو تبدیلیوں کے لیے سبسکرائب کرتا ہے۔

@Composable
fun CounterExample() {
    var count by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text("کلک کیا گیا: $count")
        Button(onClick = { count++ }) {
            Text("بڑھائیں")
        }
    }
}

@Composable
fun UserScreen(viewModel: UserViewModel) {
    val userName by viewModel.userName.collectAsState()
    Text("صارف: $userName")
}

remember دوبارہ کمپوزیشن کے درمیان قدر کو محفوظ رکھتا ہے — ورنہ mutableStateOf ہر UI اپ ڈیٹ پر نئے سرے سے بنایا جائے گا۔ collectAsState() ViewModel سے StateFlow کو Compose کے مطابق حالت میں تبدیل کرتا ہے۔ سفارش — اسکرین لیول کی حالت کے لیے ViewModel کے ساتھ StateFlow استعمال کریں، اور مقامی حالت (مثلاً پھیلا ہوا کارڈ) کے لیے mutableStateOf استعمال کریں۔ یہ علیحدگی سمارٹ/ڈمب اجزاء کے اصول کی پیروی کرتی ہے۔

State Hoisting (حالت بلند کرنا)

State Hoisting بچے کے جزو سے والدین کے جزو میں حالت بلند کرنے کا نمونہ ہے۔ والدین پیرامیٹرز کے ذریعے قدر اور کال بیک منتقل کرتا ہے، بچہ تبدیلی پر کال بیک کو کال کرتا ہے۔ والدین mutableStateOf رکھتا ہے، بچہ صرف پیرامیٹرز رکھتا ہے۔ یہ جزو کو دوبارہ قابل استعمال اور قابل آزمائش بناتا ہے: اسی TextField کو کسی بھی ڈیٹا ماخذ کے ساتھ استعمال کیا جا سکتا ہے۔

Modifier — ظاہری شکل کی تخصیص

Modifier ایک آبجیکٹ ہے جو Composable تبدیلیوں کو بیان کرتا ہے: سائز، پیڈنگ، پس منظر، کلک ہینڈلنگ، اینیمیشن، اسکرول۔ موڈیفائرز کال چین کے ذریعے لاگو کیے جاتے ہیں: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }۔ ہر کال شامل کردہ خاصیت کے ساتھ ایک نیا Modifier واپس کرتی ہے — اصل آبجیکٹ میں کوئی تبدیلی نہیں۔

موڈیفائرز کی ترتیب اہم ہے۔ Modifier.padding(16.dp).background(Color.Blue) پیڈنگ والے علاقے کو رنگ دیتا ہے۔ Modifier.background(Color.Blue).padding(16.dp) اندرونی مستطیل کو رنگ دیتا ہے، اور پیڈنگ شفاف رہتی ہے۔ میکینکس CSS باکس ماڈل سے ملتے جلتے ہیں: پہلے padding → background margin + background کی طرح کام کرتا ہے؛ پہلے background → padding background + اندرونی پیڈنگ کی طرح کام کرتا ہے۔ ڈویلپر کو صرف یاد رکھنا ہے: پہلے padding = بیرونی مارجن، بعد میں padding = اندرونی پیڈنگ۔

کسٹم موڈیفائرز

اگر بلٹ ان موڈیفائرز کافی نہیں ہیں، تو Modifier.composed { ... } یا Modifier.then() کے ذریعے کسٹم موڈیفائر بنایا جاتا ہے۔ کسٹم موڈیفائر کے اندر، لے آؤٹ پیمائش (Modifier.layout { measurable, constraints -> ... })، ڈرائنگ (Modifier.drawWithContent { ... })، اشارے (Modifier.pointerInput { ... }) استعمال کیے جا سکتے ہیں۔ مثال: کلک پر پلسیٹنگ اینیمیشن کے لیے موڈیفائر — سائز ناپتا ہے، کلک پر animateFloatAsState کے ذریعے اسکیل اینیمیشن شروع کرتا ہے۔

اینیمیشن کے لیے، Compose animate*AsState (animateFloatAsState، animateColorAsState، animateDpAsState) فراہم کرتا ہے — تبدیلی پر قدریں پرانی اور نئی حالت کے درمیان اینی میٹ ہوتی ہیں۔ داخلے/خروج اینیمیشن کے لیے — AnimatedVisibility اور AnimatedContent بلٹ ان ٹرانزیشنز (fade, slide, expand) کے ساتھ۔ تمام اینیمیشن گرافکس لیئر پر کام کرتی ہیں، غیر ضروری کمپوزیشن کو متحرک نہیں کرتیں۔

Side Effects: LaunchedEffect، DisposableEffect، remember

Composable فنکشنز کو براہ راست ضمنی اثرات (نیٹ ورک کی درخواستیں، ٹائمرز، سبسکرپشنز) نہیں کرنے چاہئیں — وہ ہر دوبارہ کمپوزیشن پر کال کیے جاتے ہیں، جو ڈپلیکیٹ درخواستوں کا باعث بنے گا۔ ضمنی اثرات کے لیے، Compose Effect فنکشنز کا ایک خاندان فراہم کرتا ہے: LaunchedEffect کمپوزیشن میں داخلے پر کوروٹین شروع کرتا ہے اور باہر نکلنے پر منسوخ کرتا ہے، DisposableEffect — ان وسائل کے لیے جنہیں واضح صفائی کی ضرورت ہے (سینسرز، BroadcastReceiver)۔

@Composable
fun SensorReader() {
    val context = LocalContext.current
    var sensorValue by remember { mutableStateOf(0f) }

    DisposableEffect(Unit) {
        val sensor = registerSensorListener(context) { value ->
            sensorValue = value
        }
        onDispose {
            unregisterSensorListener(sensor)
        }
    }

    Text("قدر: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // حالت کی تازہ کاری
    }
}

LaunchedEffect(userId) دوبارہ شروع ہوتا ہے اگر userId تبدیل ہوتا ہے — پچھلا کوروٹین منسوخ ہو جاتا ہے، نیا userId کے ساتھ نیا شروع ہوتا ہے۔ یہ دستی درخواست منسوخی کے انتظام کو ختم کرتا ہے۔ DisposableEffect(Unit) — ایک مقررہ کلید Unit کے ساتھ اثر، کمپوزیشن میں داخلے پر چلتا ہے اور باہر نکلنے پر onDispose کال کرتا ہے۔ SensorReader ایک سننے والا رجسٹر کرتا ہے اور اسکرین چھوڑنے پر ان سبسکرائب کرتا ہے — لیک کے خطرے کے بغیر۔

rememberCoroutineScope

اگر کوروٹین کو کمپوزیشن میں داخلے پر نہیں بلکہ کسی واقعہ (بٹن کلک) پر شروع کرنے کی ضرورت ہے، تو rememberCoroutineScope() استعمال کریں۔ یہ Composable لائف سائیکل سے منسلک CoroutineScope واپس کرتا ہے، جس میں DisposableEffect کی ضرورت نہیں ہے۔ مثال: بٹن کلک پر نیٹ ورک کی درخواست شروع کرنا — scope.launch { viewModel.loadData() }۔

Jetpack Compose بمقابلہ View System: موازنہ

Compose اور View System کے درمیان انتخاب 2026 میں Android ڈویلپرز کے لیے مرکزی آرکیٹیکچرل سوال ہے۔ دونوں ٹیکنالوجیز Google کے ذریعہ تعاون یافتہ ہیں، لیکن Compose وہ مرکزی سمت ہے جس پر Google وسائل خرچ کرتا ہے۔ View System صرف اہم اصلاحات حاصل کرتا ہے اور ترقی نہیں کر رہا ہے۔ فرق نحو، حالت کے انتظام، کارکردگی اور ترقی کے وقت میں ظاہر ہوتا ہے۔

نئے منصوبوں کے لیے، Google Jetpack Compose کو UI ترقی کے معیار کے طور پر تجویز کرتا ہے۔ View System 2021 سے پہلے لکھے گئے کوڈ کی دیکھ بھال اور ان صورتوں کے لیے باقی ہے جہاں کم سے کم APK سائز اہم ہے (مثال کے طور پر، ابتدائی سطح کے آلات والے ابھرتے ہوئے بازاروں کے لیے)۔ Compose اپنے اعلامیاتی نحو اور بلٹ ان اینیمیشن کی بدولت View System کے مقابلے میں UI کوڈ کے حجم کو 30–50% کم کرتا ہے۔