Jetpack Compose میں Row: یہ کیا ہے، composable خصوصیات اور یہ کیسے کام کرتا ہے

Jetpack Compose میں Row کیا ہے

Row ایک composable فنکشن ہے جو چائلڈ عناصر کو افقی ترتیب میں رکھتا ہے۔ Compose ترتیب کے درجہ بندی میں، Row Column اور Box کے ساتھ ایک بنیادی کنٹینر کی پوزیشن رکھتا ہے۔

Row کو طول و عرض بتانے کی ضرورت نہیں ہے — یہ خود بخود اپنے مواد کے مطابق ہو جاتا ہے۔ Row کی چوڑائی Modifier.fillMaxWidth یا ایک مقررہ سائز متعین نہ ہونے تک پیڈنگ سمیت چائلڈ عناصر کی چوڑائی کے مجموعے کے برابر ہوتی ہے۔

Row کے چائلڈ عناصر کے اپنے موڈیفائر ہو سکتے ہیں جو کنٹینر کے اندر ان کی پوزیشن کو متاثر کرتے ہیں۔ مثال کے طور پر، Modifier.weight عناصر کو دستیاب جگہ کا متناسب حصہ لینے کی اجازت دیتا ہے۔

Android Developers Blog, 2024 کے مطابق، Row چائلڈ عناصر کو ترتیب سے پروسیس کرتا ہے، Compose پیمائش کے قوانین کی بنیاد پر ان کے سائز کا حساب لگاتا ہے: پہلے weight کے بغیر عناصر کی پیمائش کی جاتی ہے، پھر بقیہ جگہ weight والے عناصر کے درمیان تقسیم کی جاتی ہے۔

Row کا نحو اور بنیادی دستخط

Row کے بنیادی دستخط میں modifier پیرامیٹر، horizontalArrangement اور verticalAlignment شامل ہیں۔ تمام چائلڈ عناصر آخری مواد لیمبڈا بلاک میں منتقل کیے جاتے ہیں۔

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "ایک")
        Text(text = "دو")
        Text(text = "تین")
    }
}

Row کی خصوصیات: horizontalArrangement اور verticalAlignment

horizontalArrangement پیرامیٹر طے کرتا ہے کہ Row کے اندر افقی محور کے ساتھ چائلڈ عناصر کیسے تقسیم ہوتے ہیں۔ Arrangement کلاس سے Start، End، Center، SpaceBetween، SpaceAround اور SpaceEvenly کی قدریں دستیاب ہیں۔

Arrangement.Start عناصر کو کنٹینر کے شروع میں رکھتا ہے، Arrangement.End — آخر میں، اور Arrangement.Center — درمیان میں۔ یہ قدریں CSS Flexbox میں justify-content پراپرٹی کی طرح کام کرتی ہیں۔

Arrangement.SpaceBetween عناصر کو یکساں طور پر تقسیم کرتا ہے، پہلا عنصر شروع میں، آخری آخر میں اور باقی ان کے درمیان برابر فاصلے کے ساتھ۔ Material Design Guidelines, 2025 کے مطابق، SpaceBetween ٹول بارز اور نیویگیشن قطاروں کے لیے بہترین ہے۔

verticalAlignment پیرامیٹر عناصر کو عمودی طور پر سیدھ میں لاتا ہے۔ Alignment.Top، Alignment.CenterVertically اور Alignment.Bottom کی قدریں دستیاب ہیں۔ یہ خاصیت اس وقت مفید ہے جب Row کے عناصر کی اونچائیاں مختلف ہوں — مثال کے طور پر، ایک سے زیادہ سطروں والے متن کے ساتھ آئیکن۔

Arrangement قدروں کا جدول

Modifier.weight کے ساتھ جگہ کی تقسیم

Modifier.weight ایک موڈیفائر ہے جو صرف Row اور Column کے اندر دستیاب ہے جو مخصوص قدر کے تناسب سے چائلڈ عناصر کے درمیان دستیاب جگہ تقسیم کرتا ہے۔ اگر ایک عنصر کا وزن 1.0f ہے اور دوسرے کا 2.0f ہے، تو دوسرا عنصر دوگنی جگہ لے گا۔

وزن کے بغیر عناصر اپنے مواد کے لیے درکار جگہ لیتے ہیں۔ بقیہ جگہ وزن والے عناصر کے درمیان ان کے وزن کے تناسب سے تقسیم کی جاتی ہے۔ یہ رویہ CSS Flexbox میں flex-grow پراپرٹی سے ملتا جلتا ہے۔

Android Developer Documentation, 2025 کے مطابق، weight صرف Row، Column اور BoxWithConstraints کے اندر کام کرتا ہے۔ Row میں weight استعمال کرتے وقت، تمام چائلڈ عناصر دو مراحل میں ماپے جاتے ہیں: پہلے وزن کے بغیر عناصر، پھر وزن والے عناصر۔

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "بائیں",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "دائیں")
    }
}

Row کے ساتھ کوڈ کی مثالیں

پہلی مثال ایک آئیکن اور متن کے ساتھ Row دکھاتی ہے — رابطوں کی فہرست یا ترتیبات کے لیے ایک عام منظر نامہ۔ Icon اور Text کو verticalAlignment کے ساتھ درمیان میں Row میں لپیٹا گیا ہے۔

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "پسندیدہ میں شامل کریں")
    }
}

دوسری مثال بٹنوں اور یکساں تقسیم کے ساتھ Row دکھاتی ہے۔ SpaceEvenly تمام بٹنوں اور کنٹینر کے کناروں کے درمیان برابر فاصلے کی ضمانت دیتا ہے۔

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("منسوخ کریں") }
        Button(onClick = {}) { Text("محفوظ کریں") }
    }
}

تیسری مثال — درجہ بندی ظاہر کرنے کے لیے Card کے اندر Row۔ Modifier.weight کے ساتھ ایک نیسٹڈ Row درجہ بندی کے ستارے اور عددی قدر کو مقررہ جگہ لینے کی اجازت دیتا ہے۔

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "درجہ بندی:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

انکولی ترتیب میں Row کی خصوصیات

Row کو انکولی ترتیب میں چوڑائی کے کنٹرول کی ضرورت ہوتی ہے۔ اگر Row کا مواد دستیاب اسکرین کی چوڑائی سے تجاوز کر جائے تو عناصر کنٹینر کی حدود سے باہر نکل سکتے ہیں۔ اسے روکنے کے لیے، Modifier.horizontalScroll استعمال کریں یا Column پر سوئچ کریں۔

Row کو Modifier.weight کے ساتھ جوڑتے وقت، پیرنٹ Row کے لیے fillMaxWidth سیٹ کرنا ضروری ہے — ورنہ weight غیر موجود جگہ تقسیم کرے گا۔ Material Design Guidelines, 2025 کے مطابق، fillMaxWidth کے بغیر weight والا Row ایک غلط ترتیب سمجھا جاتا ہے۔

انکولی انٹرفیس کے لیے، Row کو Box کے ساتھ جوڑنے یا مختلف اسکرین سائزز پر خودکار عنصر کی تقسیم کے لیے Arrangement.SpaceBetween استعمال کرنے کی سفارش کی جاتی ہے۔ یہ میڈیا سوالات کے بغیر لچک فراہم کرتا ہے۔

• Modifier.horizontalScroll — Row کے بہاؤ پر اسکرولنگ شامل کرتا ہے
• Modifier.weight — جگہ کو متناسب طور پر تقسیم کرتا ہے
• Arrangement.SpaceBetween — کناروں پر فکسنگ کے ساتھ انکولی تقسیم