@Composable: یہ کیا ہے، Compose تشریح اور اطلاق کا دائرہ

Jetpack Compose میں @Composable کیا ہے

@Composable Kotlin زبان کی ایک تشریح ہے جو کسی فنکشن کو Jetpack Compose فریم ورک میں صارف انٹرفیس بیان کرنے کے لیے نشان زد کرتی ہے۔ جب Kotlin کمپائلر اس تشریح کا سامنا کرتا ہے، تو یہ اضافی کوڈ تیار کرتا ہے جو فنکشن کو ترکیب کے سیاق و سباق — UI ٹری مینجمنٹ سسٹم — میں کام کرنے کی اجازت دیتا ہے۔

@Composable تشریح Google نے 2021 میں Jetpack Compose 1.0 کے پہلے مستحکم ورژن کے ساتھ متعارف کروائی تھی۔ اس کے ظہور سے پہلے، Android انٹرفیس کی ترقی صرف XML مارک اپ اور View سسٹم کے ذریعے کی جاتی تھی۔ @Composable نے نقطہ نظر کو یکسر تبدیل کر دیا: علیحدہ مارک اپ فائل میں UI بیان کرنے کے بجائے، ڈیولپر براہ راست Kotlin میں انٹرفیس لکھتا ہے۔

@Composable اور عام Kotlin فنکشنز کے درمیان بنیادی فرق حالت کو پڑھنے اور اس کی تبدیلیوں پر رد عمل ظاہر کرنے کی صلاحیت ہے۔ جب کوئی متغیر جسے Composable فنکشن پڑھتا ہے اپنی قدر تبدیل کرتا ہے، تو سسٹم خود بخود اس فنکشن کے دوبارہ شروع (دوبارہ ترکیب) کا شیڈول بناتا ہے۔ یہ ڈیولپر کو findViewById اور setText کے ذریعے دستی UI اپ ڈیٹ سے آزاد کرتا ہے۔

@Composable کی داخلی میکینکس سلاٹ کے تصور پر مبنی ہے — ایک خاص میموری علاقہ جو ترکیب کے اندر ہر فنکشن کے لیے مختص کیا جاتا ہے۔ یہ سلاٹ فنکشن کو بھیجی گئی اقدار کے ساتھ ساتھ بعد کی کالز میں موازنہ کے لیے ضروری خدماتی معلومات کو محفوظ کرتا ہے۔

Composable فنکشن کا اعلان کیسے کریں

Composable فنکشن کا اعلان کرنے کے لیے، fun کلیدی لفظ سے پہلے @Composable تشریح شامل کرنا کافی ہے۔ فنکشن ایک ایسے پیکیج میں ہونا چاہیے جو androidx.compose.runtime سے تشریح درآمد کرے۔ فنکشن کا نام بڑے حرف سے شروع کرنے کی سفارش کی جاتی ہے — یہ Compose کمیونٹی میں وسیع پیمانے پر قبول شدہ ایک کنونشن ہے جو UI اجزاء کو عام فنکشنز سے بصری طور پر الگ کرتا ہے۔

import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("ہیی، $name!")
        Button(onClick = { count++ }) {
            Text("$count بار کلک کیا گیا")
        }
    }
}

Composable فنکشن کے پیرامیٹرز کچھ بھی ہو سکتے ہیں — بنیادی اقسام، سٹرنگز، لیمبڈا، اور یہاں تک کہ Slot API کے ذریعے بھیجے گئے دوسرے Composable فنکشنز۔ سفارش کی جاتی ہے کہ پیرامیٹرز کو ناقابل تغیر (val) بنایا جائے تاکہ دوبارہ ترکیب کے دوران ضمنی اثرات سے بچا جا سکے۔ تمام قابل تغیر ڈیٹا کو Compose کے حالت کے میکانزم کے ذریعے منظم کیا جانا چاہیے۔

Composable فنکشنز عام فنکشنز کی طرح صوابدیدی قدر واپس نہیں کر سکتے — ان کا واحد کام UI ٹری کا ایک ٹکڑا بنانا یا اپ ڈیٹ کرنا ہے۔ تاہم، خاص پیٹرن جیسے State Hoisting موجود ہیں، جہاں Compose فنکشن پیرامیٹرز کے ذریعے حالت اور کال بیک قبول کرتا ہے، خالص اور دوبارہ قابل استعمال رہتا ہے۔

Kotlin میں Composable فنکشنز کے قواعد

Compose سسٹم کئی سخت پابندیاں لگاتا ہے کہ Composable فنکشنز کیسے نظر آنے اور برتاؤ کرنے چاہئیں۔ پہلا قاعدہ: Composable فنکشن صرف دوسرے Composable فنکشنز یا عام فنکشنز کو کال کر سکتا ہے جن کا کوئی ضمنی اثر نہ ہو۔ یہ ترکیب کی پیش گوئی اور Compose کی اصلاح کے درست کام کو یقینی بناتا ہے۔

دوسرا قاعدہ عملدرآمد کی ترتیب سے متعلق ہے۔ Compose کو Composable فنکشنز کو کسی بھی ترتیب میں کال کرنے کا حق ہے، لہذا ایسے فنکشن کے جسم میں کوڈ پڑوسی فنکشنز کی کال کی ترتیب پر منحصر نہیں ہونا چاہیے۔ ہر Composable فنکشن کو UI ٹری میں اپنی پوزیشن کی سطح پر خود کفیل ہونا چاہیے۔

تیسرا قاعدہ — Composable فنکشن کے جسم کے اندر ضمنی اثرات کی ممانعت۔ ڈیٹا بیس میں لکھنا، نیٹ ورک کی درخواستیں بھیجنا یا بیرونی متغیرات تبدیل کرنا جیسے آپریشنز صرف خاص اثرات کے اندر کیے جانے چاہئیں: LaunchedEffect، DisposableEffect، یا SideEffect۔ اس قاعدے کی خلاف ورزی دوبارہ ترکیب کے دوران غیر متوقع رویے کا باعث بنتی ہے۔

چوتھا قاعدہ: Composable فنکشنز کو idempotent ہونا چاہیے۔ انہیں اسی دلائل کے ساتھ دوبارہ کال کرنے سے وہی UI پیدا ہونا چاہیے۔ یہ ضرورت اسکپنگ آپٹیمائزیشن کے درست کام کے لیے ضروری ہے، جہاں Compose ان فنکشنز کی دوبارہ ڈرائنگ چھوڑ دیتا ہے جن کا ان پٹ ڈیٹا تبدیل نہیں ہوا ہے۔

// درست: بغیر ضمنی اثر کے خالص Composable فنکشن
@Composable
fun UserCard(user: User, onClick: () -> Unit) {
    Card(modifier = Modifier.clickable { onClick() }) {
        Text(text = user.name)
    }
}

// غلط: جسم کے اندر ضمنی اثر
@Composable
fun WrongCard(userId: String) {
    // val result = viewModel.loadUser(userId)  // اجازت نہیں
    Text("لوڈ ہو رہا ہے...")
}

@Composable کے استعمال کی مثالیں

آئیے @Composable تشریح کا استعمال کرتے ہوئے پروفائل اسکرین بنانے کی ایک عملی مثال دیکھتے ہیں۔ یہاں ہم متعدد Composable فنکشنز کے امتزاج، حالت اور موڈیفائر کے ساتھ کام کرنے کا مظاہرہ کرتے ہیں — کسی بھی Compose لے آؤٹ کے کلیدی عناصر۔

@Composable
fun ProfileScreen(userId: String) {
    var isFollowed by remember { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        ProfileHeader(userId = userId)
        Spacer(modifier = Modifier.height(16.dp))
        StatsRow(posts = 42, followers = 1280)
        Spacer(modifier = Modifier.height(24.dp))
        FollowButton(
            isFollowed = isFollowed,
            onToggle = { isFollowed = !isFollowed }
        )
    }
}

@Composable
fun ProfileHeader(userId: String) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        AsyncImage(model = "https://example.com/avatars/$userId",
            contentDescription = "User avatar")
        Spacer(modifier = Modifier.width(12.dp))
        Text(text = "صارف #$userId", style = MaterialTheme.typography.headlineMedium)
    }
}

@Composable
fun StatsRow(posts: Int, followers: Int) {
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        StatItem("Posts", posts)
        StatItem("Followers", followers)
    }
}

@Composable
fun StatItem(label: String, value: Int) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "$value", style = MaterialTheme.typography.headlineSmall)
        Text(text = label, style = MaterialTheme.typography.bodySmall)
    }
}

مثال میں، ہر Composable فنکشن اسکرین کے اپنے حصے کے لیے ذمہ دار ہے: ProfileScreen مجموعی حالت اور چائلڈ فنکشنز کی ترکیب کا انتظام کرتا ہے، ProfileHeader اوتار اور نام ظاہر کرتا ہے، اور StatsRow ایک شماریات بلاک دکھاتا ہے۔ یہ نقطہ نظر واحد ذمہ داری کے اصول کی پیروی کرتا ہے اور اجزاء کے دوبارہ استعمال کو آسان بناتا ہے۔

Composable فنکشنز کی اقسام اور ان کا مقصد

Jetpack Compose میں Composable فنکشنز کی تین اہم اقسام ہیں۔ پہلی قسم — کنٹینر (Row, Column, Box, LazyColumn) — چائلڈ عناصر کی ترتیب کا تعین کرتی ہے۔ دوسری قسم — ڈسپلے عناصر (Text, Image, Icon, Button) — مخصوص UI اجزاء کو رینڈر کرتی ہے۔ تیسری قسم — کسٹم Composable فنکشنز — بلٹ ان اجزاء کو دوبارہ قابل استعمال بلاکس میں یکجا کرتی ہے۔

کنٹینر عام عناصر سے اس لحاظ سے مختلف ہوتے ہیں کہ وہ content لیمبڈا قبول کرتے ہیں — @Composable () -> Unit قسم کا آخری پیرامیٹر۔ یہ میکانزم نیسٹڈ UI ٹری بنانے کی اجازت دیتا ہے: ہر کنٹینر اپنے سیاق و سباق اور میموری علاقے کے ساتھ ایک چائلڈ ترکیب پیدا کرتا ہے۔

کسٹم Composable فنکشنز دو ذیلی اقسام میں تقسیم ہوتے ہیں: سمارٹ (smart) اور ڈمب (dumb)۔ سمارٹ فنکشنز حالت اور منطق کا انتظام کرتے ہیں — ان میں remember، LaunchedEffect اور دیگر Compose APIs کے کالز ہوتے ہیں۔ ڈمب فنکشنز پیرامیٹرز کے ذریعے تمام ڈیٹا حاصل کرتے ہیں اور صرف اسے ظاہر کرتے ہیں۔ سمارٹ اور ڈمب اجزاء میں تقسیم جانچ کی صلاحیت اور کوڈ کے دوبارہ استعمال کو بہتر بناتی ہے۔

@Composable اور اجزاء کا دوبارہ استعمال

@Composable تشریح کا بنیادی فائدہ وراثت اور پیچیدہ کلاس کے درجہ بندی کے بغیر دوبارہ قابل استعمال UI اجزاء بنانے کی صلاحیت ہے۔ View سسٹم کے برعکس، جہاں ہر کسٹم عنصر کے لیے کنسٹرکٹرز کے ساتھ Java کلاس بنانے کی ضرورت ہوتی تھی، Composable جزو صرف پیرامیٹرز کے ساتھ ایک Kotlin فنکشن ہے۔

دوبارہ استعمال کو یقینی بنانے کے لیے Slot API پیٹرن استعمال کیا جاتا ہے، جہاں Composable فنکشن اپنے لے آؤٹ کے مختلف علاقوں کے لیے content لیمبڈا قبول کرتا ہے۔ مثال کے طور پر، Card جزو ہیڈر، باڈی اور فوٹر کے لیے علیحدہ مواد قبول کر سکتا ہے، جو اسے ایپلیکیشن کی کسی بھی اسکرین کے لیے عالمگیر بنا دیتا ہے۔

موڈیفائر (Modifier) دوبارہ استعمال میں کلیدی کردار ادا کرتے ہیں: وہ جزو کو تبدیل کیے بغیر پیڈنگ، سائز، کلکس اور اینیمیشنز ترتیب دینے کی اجازت دیتے ہیں۔ ڈیفالٹ ویلیو (Modifier = Modifier) کے ساتھ Composable فنکشن کے پیرامیٹر کے طور پر ہمیشہ Modifier پاس کرنے کی سفارش کی جاتی ہے — یہ Google کی سرکاری لائبریریوں میں اپنایا گیا ایک معیاری عمل ہے۔

@Composable
fun SectionCard(
    modifier: Modifier = Modifier,
    title: String,
    content: @Composable () -> Unit
) {
    Card(modifier = modifier) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Spacer(modifier = Modifier.height(8.dp))
            content()
        }
    }
}

Slot API کی بدولت، SectionCard جزو مختلف اسکرینوں پر مختلف مواد — فارمز، فہرستیں، ٹیکسٹ بلاکس — کے ساتھ استعمال کیا جا سکتا ہے۔ موڈیفائر اور Slot API کا امتزاج Kotlin کی فراہم کردہ ٹائپ سیفٹی کو کھونے کے بغیر Compose اجزاء کو انتہائی لچکدار بناتا ہے۔