Jetpack Compose: بنیادی باتیں، Composable فنکشنز اور State

Jetpack Compose کیا ہے؟

Jetpack Compose ایک Google UI فریم ورک ہے جو ری ایکٹو پروگرامنگ کے اصولوں پر بنایا گیا ہے۔ XML لے آؤٹ، FragmentManager اور ViewBinding والی Activity کی بجائے، ڈیویلپر @Composable تشریح والے Kotlin فنکشنز کے ذریعے انٹرفیس بیان کرتا ہے۔ Compose LayoutInflater استعمال نہیں کرتا — UI خالص Kotlin فنکشنز ہیں جو بائٹ کوڈ میں کمپائل ہوتے ہیں۔ فریم ورک کئی لائبریریوں پر مشتمل ہے: Compose UI (بنیادی اجزاء Text, Button, Column, Row)، Compose Foundation (Material Design, Gestures, Focus)، Compose Material3 (Dynamic Colors کے ساتھ Material You) اور Compose Runtime (State, Side Effects, Coroutines)۔ Compose Android API 21+ (Android 5.0) پر کام کرتا ہے اور ComposeView — ایک AndroidView اڈاپٹر کے ذریعے موجودہ View/XML کوڈ کے ساتھ مکمل طور پر مطابقت رکھتا ہے۔

Compose بمقابلہ View System

View System (2008) دستی انتظام کے ساتھ View آبجیکٹس کا درجہ بندی استعمال کرتا ہے: ڈیویلپر XML لے آؤٹ بناتا ہے، findViewById کے ذریعے Views ڈھونڈتا ہے، RecyclerView کے لیے Adapter لاگو کرتا ہے اور ڈیٹا تبدیل ہونے پر notifyDataSetChanged کال کرتا ہے۔ Compose UI کو فعلی طور پر بیان کرتا ہے: جب حالت تبدیل ہوتی ہے، فریم ورک صرف تبدیل شدہ Composable فنکشنز کو دوبارہ ترتیب دیتا ہے، diff کا حساب لگاتا ہے اور Canvas پر کم سے کم تبدیلیاں لاگو کرتا ہے۔ Compose کی کارکردگی View System کے برابر ہے، اور پیچیدہ فہرستوں (LazyColumn) والے منظرناموں میں key پیرامیٹر کے ذریعے غیر ضروری عناصر کو چھوڑ کر یہ اکثر RecyclerView سے بہتر کارکردگی دکھاتا ہے۔ IT Sectr میں، Compose minSdk 24+ والے Android ایپلیکیشنز کے نئے ماڈیولز میں استعمال ہوتا ہے۔

Composable فنکشنز: UI کے تعمیری بلاکس

@Composable — ایک تشریح جو ایک عام Kotlin فنکشن کو UI تعمیری بلاک میں تبدیل کرتی ہے۔ 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 کو دوبارہ ترتیب دیتا ہے — نئی قدروں کے ساتھ جزو کو دوبارہ تخلیق کرتا ہے۔

Jetpack Compose میں State اور Recomposition

State Compose میں کوئی بھی قدر ہے جس کی تبدیلی منحصر @Composable فنکشنز کی دوبارہ ترتیب (دوبارہ شروع) کو متحرک کرتی ہے۔ بنیادی طریقہ mutableStateOf() ہے، جو Compose کے سنیپ شاٹ سسٹم کے تعاون سے MutableState<T> بناتا ہے۔ سنیپ شاٹ تبدیلی سے باخبر رہنے کا طریقہ کار ہے: State میں لکھنے پر، Compose موجودہ سنیپ شاٹ کو گندا (dirty) نشان زد کرتا ہے، اور دوبارہ ترتیب شیڈیولر صرف ان Composable فنکشنز کو دوبارہ شروع کرتا ہے جو اس State کو پڑھ رہے ہیں۔ قابل مشاہدہ مجموعوں کے لیے mutableStateListOf() اور mutableStateMapOf() استعمال کریں۔ Compose Kotlin Flow کے لیے collectAsState() اور LiveData کے لیے observeAsState() کے ذریعے Lifecycle-Aware اجزاء سے State کو سپورٹ کرتا ہے۔

@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")
    }
}

کوڈ mutableStateOf() کے ذریعے محفوظ liked (Boolean) اور count (Int) حالت کے ساتھ ایک "Like" بٹن بناتا ہے۔ دبانے پر، liked الٹ جاتا ہے اور کاؤنٹر بڑھتا/گھٹتا ہے — Compose خود بخود LikeButton کو دوبارہ ترتیب دیتا ہے۔ by ڈیلیگیٹ State کو عام متغیر کی طرح استعمال کرنے کی اجازت دیتا ہے: liked.value = !liked.value کی بجائے liked = !liked۔ بٹن کا رنگ primary (پسند کیا گیا) اور surfaceVariant (پسند نہیں کیا گیا) کے درمیان ردعمل سے تبدیل ہوتا ہے۔

remember: دوبارہ ترتیب کے درمیان کیشنگ

remember — ایک Compose فنکشن جو دوبارہ ترتیب کے درمیان قدر کو کیش کرتا ہے۔ remember کے بغیر، Composable فنکشن کا ہر دوبارہ شروع ہونا ایک نئی حالت (mutableStateOf) بناتا ہے — یہ ایپلیکیشن منطق توڑ دیتا ہے: اسکرین گھومنے یا والدین State کی تبدیلی پر کاؤنٹر ری سیٹ ہو جاتا ہے۔ remember ایک حساب لیمبڈا لیتا ہے اور صرف پہلی ترتیب پر قدر کا حساب لگاتا ہے؛ بعد کی ترتیب پر کیش شدہ نتیجہ لوٹاتا ہے۔ کیش ری سیٹ کرنے کے لیے remember(key) استعمال کریں — کلید یہ طے کرتی ہے کہ قدر کب دوبارہ حساب کرنی ہے۔ remember(key1, key2) کسی بھی کلید کے تبدیل ہونے پر دوبارہ حساب کرتا ہے۔ طویل مدتی حالتوں (اسکرین گھومنے سے بچنے والی) کے لیے rememberSaveable استعمال کریں — SavedStateHandle کے ذریعے Bundle میں محفوظ کرنے والا remember کا مشابہ۔

@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 ایک کوروٹین شروع کرتا ہے جو ہر سیکنڈ seconds بڑھاتا ہے۔ TimerScreen کی دوبارہ ترتیب (ہر سیکنڈ) پر rememberSaveable کی بدولت seconds ری سیٹ نہیں ہوتا۔ عام remember اس حالت کے لیے استعمال کریں جسے کنفیگریشن تبدیلیاں برداشت نہیں کرنی چاہئیں (مثلاً، اینی میشن پرچم)۔

Modifier: Composable سیٹنگز کی زنجیر

Modifier — ایک ناقابل تبدیلی کنٹینر آبجیکٹ جو Composable اجزاء کی ظاہری شکل، رویے اور ترتیب کو ترتیب دینے کے لیے Builder پیٹرن کو لاگو کرتا ہے۔ 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(
                "Android کے لیے State اور Modifier کے ساتھ اعلانیہ UI",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample Modifier زنجیر کو ظاہر کرتا ہے: fillMaxWidth + padding + clickable۔ Card اپنی elevation اور colors ترتیبات کے ساتھ ایک Material3 جزو ہے۔ اندرونی Column کا اندرونی پیڈنگ 16dp ہے۔ Compose Material3 Android 12+ پر Dynamic Color (Material You) کے لیے خود بخود رنگوں کو ڈھال لیتا ہے۔ Card Compose میں 30+ بلٹ ان Material3 اجزاء میں سے ایک ہے۔

State hoisting اور Compose آرکیٹیکچر

State hoisting — ایک پیٹرن ہے جس میں حالت کو Composable فنکشن سے اس کے کالر میں بلند کیا جاتا ہے، فنکشن کو بے حالت (stateless) بناتا ہے۔ ایک بے حالت جزو خود State رکھے بغیر پیرامیٹرز کے ذریعے ڈیٹا اور کال بیک وصول کرتا ہے۔ یہ دوبارہ استعمال کی اہلیت اور جانچ کی اہلیت کو بہتر بناتا ہے: جزو کو مختلف Stateز کے ساتھ بلایا جا سکتا ہے اور پیش نظارہ میں جانچا جا سکتا ہے۔ Google آرکیٹیکچر تجویز کرتا ہے: ViewModel + StateFlow (یا MutableStateFlow) + Compose میں collectAsState()۔ ViewModel حالت کو اسکرین کی سطح پر بلند کرتا ہے، Compose اسے پیش کرتا ہے۔ ضمنی اثرات (LaunchedEffect, DisposableEffect) ایک بار کے واقعات کو ہینڈل کرتے ہیں۔