Column: Compose میں عمودی ترتیب اور کنٹینر کنفیگریشن

Jetpack Compose میں Column کیا ہے

Column ایک Composable فنکشن ہے جو اختیاری پیرامیٹرز لیتا ہے: modifier، verticalArrangement، horizontalAlignment اور content — ColumnScope کے ساتھ ایک lambda۔ Column کے اندر، چائلڈ Composable فنکشنز اعلان کی ترتیب میں اوپر سے نیچے ترتیب دی جاتی ہیں۔ Column کی اونچائی چائلڈ کی اونچائیوں کے مجموعہ اور Arrangement کے ذریعے مخصوص کردہ جگہ کے برابر ہوتی ہے۔ چوڑائی Alignment کو مدنظر رکھتے ہوئے زیادہ سے زیادہ چائلڈ چوڑائی کے برابر ہوتی ہے۔

Column ایک پوشیدہ کنٹینر ہے: اس کا ڈیفالٹ طور پر کوئی پس منظر یا بارڈر نہیں ہے۔ اگر آپ کو پس منظر کی ضرورت ہو تو، خود Column پر Modifier.background() شامل کریں۔ LazyColumn کے برعکس، Column تمام چائلڈ عناصر کو ایک ساتھ رینڈر کرتا ہے اور ورچوئلائزیشن کو سپورٹ نہیں کرتا۔ اس کا مطلب ہے کہ Column صرف چھوٹے ڈیٹا سیٹس کے لیے موزوں ہے — 10-15 عناصر تک۔ لمبی فہرستوں کے لیے، LazyColumn استعمال کریں۔

ColumnScope Column کے content lambda کے لیے receiver ہے۔ یہ اضافی modifier فراہم کرتا ہے جو صرف Column کے اندر کام کرتے ہیں: weight()، align()، alignByBaseline()۔ یہ modifier عمودی لے آؤٹ کی خصوصیات پر انحصار کرنے کی وجہ سے Column کے باہر بے معنی ہیں۔ مثال کے طور پر، Modifier.align(Alignment.CenterHorizontally) ایک چائلڈ عنصر کو Column کے مرکز میں افقی طور پر سیدھ کرتا ہے۔

Column کے پیرامیٹرز: Arrangement, Alignment, Modifier

VerticalArrangement اس بات کا تعین کرتا ہے کہ عناصر کے درمیان عمودی جگہ کیسے تقسیم کی جاتی ہے۔ دستیاب اقدار: Arrangement.Top (پہلے سے طے شدہ)، Bottom، Center، SpaceBetween، SpaceEvenly، SpaceAround۔ اگر Column کی اونچائی عناصر کی اونچائیوں کے مجموعے سے زیادہ ہے تو، Arrangement خالی جگہ تقسیم کرتا ہے۔ اگر عناصر پوری اونچائی پر قابض ہیں تو، Arrangement کا کوئی اثر نہیں ہوتا۔

HorizontalAlignment ہر چائلڈ عنصر کی افقی سیدھ متعین کرتا ہے۔ Alignment.Start (LTR کے لیے ڈیفالٹ)، CenterHorizontally، End۔ Alignment ہر عنصر پر آزادانہ طور پر کام کرتا ہے: اگر ایک عنصر تنگ ہے اور دوسرا چوڑا ہے، تو پہلا سیدھ میں آئے گا، دوسرا Column کی حدود سے باہر نکل سکتا ہے۔ Alignment صرف اس وقت کام کرتا ہے جب Column کی ایک مقررہ چوڑائی یا fillMaxWidth ہو۔

Column کے لیے Modifier: Column ایک Modifier قبول کرتا ہے جو خود کنٹینر پر لاگو ہوتا ہے۔ Modifier.fillMaxWidth()، fillMaxHeight()، size()، padding() — تمام معیاری modifier کام کرتے ہیں۔ خصوصی نوٹ: Modifier.height(IntrinsicSize.Min) Intrinsic پیمائش کا استعمال کرتے ہوئے چائلڈ عناصر کی بنیاد پر کم از کم اونچائی کا حساب لگانے پر Column کو مجبور کرتا ہے۔

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("اوپر", modifier = Modifier.background(Color.Cyan))
        Text("وسط", modifier = Modifier.background(Color.Magenta))
        Text("نیچے", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column مواد کے مطابق اونچائی ایڈجسٹ کرتا ہے
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("مختصر متن")
        Text("ایک بہت لمبا متن جو کالم کے اندر لپیٹ جائے گا")
    }
}

Column weight: عناصر کے درمیان جگہ کی تقسیم

Modifier.weight() ایک ColumnScope modifier ہے جو Column عناصر کے درمیان خالی عمودی جگہ کو مخصوص وزن کے مطابق متناسب طور پر تقسیم کرتا ہے۔ اگر Column 400dp اونچائی پر قابض ہے اور چائلڈ عناصر کل 100dp ہیں، تو بقیہ 300dp وزن والے عناصر کے درمیان تقسیم ہو جاتے ہیں۔ weight(2f) والا عنصر weight(1f) والے عنصر سے دوگنی جگہ حاصل کرے گا۔

fill — weight کا دوسرا پیرامیٹر: weight(weight: Float, fill: Boolean = true)۔ اگر fill = true (پہلے سے طے شدہ) ہے تو، عنصر دستیاب پوری اونچائی تک پھیل جاتا ہے۔ اگر fill = false ہے تو، عنصر صرف اپنی اندرونی اونچائی لیتا ہے اور بقیہ جگہ خالی رہتی ہے۔ یہ اس وقت مفید ہے جب عنصر کو ایک طرف چپکنا چاہیے لیکن weight صرف خالی جگہ کی تقسیم کا تناسب متعین کرتا ہے۔

Weight کی حدود: weight صرف مقررہ اونچائی یا fillMaxHeight() والے Column میں کام کرتا ہے۔ اگر Column کی اونچائی چائلڈ عناصر (wrap content) سے متعین ہوتی ہے تو، وزن بے معنی ہیں — تقسیم کرنے کے لیے کوئی خالی جگہ نہیں ہے۔ نیز، weight کو اسی عنصر پر Modifier.height() کے ساتھ نہیں ملایا جا سکتا — وہ متضاد ہیں اور weight کو نظر انداز کر دیا جاتا ہے۔

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // اونچائی کا 1/6 لیتا ہے (weight 1، مجموعہ 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // اونچائی کا 2/6 لیتا ہے
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // اونچائی کا 3/6 لیتا ہے
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column بمقابلہ LazyColumn: کب کیا استعمال کریں

Column تمام چائلڈ عناصر کو فوری طور پر رینڈر کرتا ہے۔ اگر 10-15 سے زیادہ عناصر ہوں تو، Column کمپوزیشن اور پیمائش پر اہم بوجھ ڈالتا ہے۔ LazyColumn، اس کے برعکس، صرف نظر آنے والے عناصر کو رینڈر کرتا ہے اور غائب عناصر کو دوبارہ استعمال کرتا ہے۔ لمبی فہرستوں، ہزاروں عناصر والی فہرستوں، لامحدود فہرستوں یا چیٹ کے لیے — LazyColumn لازمی ہے۔

Column کب بہتر ہے: فارم اسکرینز (3-10 فیلڈز)، پروفائل کارڈز، آئیکنز کے ساتھ عمودی کالم، مینوز۔ Column IntrinsicSize کو بھی سپورٹ کرتا ہے، جو انکولی اونچائی کے لیے مفید ہے۔ اس کے علاوہ، Column کو ڈیبگ کرنا آسان ہے — کوئی ورچوئلائزیشن نہیں، تمام عناصر Layout Inspector میں نظر آتے ہیں۔ جامد UI کے لیے، Column صحیح انتخاب ہے۔

LazyColumn فراہم کرتا ہے: آئٹم کیشنگ، کلید پر مبنی شناخت، شامل کرنے/ہٹانے کی اینیمیشن (animateItemPlacement)، اسٹکی ہیڈرز۔ اگر فہرست میں مختلف اقسام کے عناصر (مختلف viewType) ہوں تو، items میں sealed class کے ساتھ LazyColumn استعمال کریں۔ Column اسٹکی ہیڈرز کو سپورٹ نہیں کرتا (انہیں اسکرول ایبل Column کے ذریعے ایمولیٹ کرنا ضروری ہے)۔ نیز، LazyColumn GridCells استعمال کرتے وقت LazyVerticalGrid کو سپورٹ کرتا ہے۔

Column استعمال کی عملی مثالیں

آئیے ایک صارف پروفائل اسکرین دیکھتے ہیں جہاں Column کو اوتار، نام، بائیو اور ایکشن بٹن کے لیے مرکزی کنٹینر کے طور پر استعمال کیا گیا ہے۔ یہاں، IntrinsicSize.Min والا Column مواد کے مطابق ایڈجسٹ ہوتا ہے اور weight حصوں کے درمیان جگہ تقسیم کرنے کے لیے استعمال ہوتا ہے۔

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // اوتار
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // نام
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // بائیو
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // ایکشن بٹن
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("پیغام") }
                OutlinedButton(onClick = { }) { Text("فالو کریں") }
            }
        }
    }
}

مثال میں، Column عناصر کے درمیان یکساں فاصلے کے لیے Arrangement.spacedBy(8.dp) استعمال کرتا ہے۔ horizontalAlignment = CenterHorizontally اوتار، نام اور بائیو کو مرکز میں رکھتا ہے۔ Column کے اندر Row ایک قطار میں بٹن کے لیے nested کنٹینر ہے۔ Column (عمودی ترتیب) اور Row (افقی ترتیب) کا یہ امتزاج Compose میں UI کی تعمیر کا ایک عام نمونہ ہے۔