Row في Jetpack Compose: ما هي، خصائص composable وكيف تعمل

ما هو Row في Jetpack Compose

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. تتضمن القيم المتاحة Start و End و Center و SpaceBetween و SpaceAround و SpaceEvenly من فئة Arrangement.

Arrangement.Start يضع العناصر في بداية الحاوية، Arrangement.End — في النهاية، و Arrangement.Center — في المنتصف. تعمل هذه القيم بشكل مشابه لخاصية justify-content في CSS Flexbox.

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، فسيشغل العنصر الثاني ضعف المساحة.

العناصر بدون weight تشغل المساحة اللازمة لمحتواها. يتم توزيع المساحة المتبقية بين العناصر ذات weight بشكل متناسب مع أوزانها. هذا السلوك مشابه لخاصية flex-grow في CSS Flexbox.

وفقًا لـ Android Developer Documentation, 2025، يعمل weight فقط داخل Row و Column و BoxWithConstraints. عند استخدام weight في Row، يتم قياس جميع العناصر الفرعية في مرورين: أولاً العناصر بدون weight، ثم العناصر ذات weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "يسار",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "يمين")
    }
}

أمثلة على الكود مع Row

المثال الأول يوضح Row مع أيقونة ونص — سيناريو نموذجي لقائمة جهات الاتصال أو الإعدادات. يتم تغليف Icon و Text في Row مع verticalAlignment في المنتصف.

@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("حفظ") }
    }
}

المثال الثالث — Row داخل Card لعرض تقييم. يسمح Row المتداخل مع Modifier.weight لنجمة التقييم والقيمة الرقمية بشغل مساحة ثابتة.

@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، من المهم تعيين fillMaxWidth لـ Row الأصلي — وإلا فإن weight سيوزع مساحة غير موجودة. وفقًا لـ Material Design Guidelines, 2025، يعتبر Row مع weight بدون fillMaxWidth تكوينًا غير صالح.

للحصول على واجهات تكيفية، يُنصح بدمج Row مع Box أو استخدام Arrangement.SpaceBetween للتوزيع التلقائي للعناصر عبر أحجام الشاشات المختلفة. يوفر هذا المرونة بدون استعلامات وسائط.

• Modifier.horizontalScroll — يضيف التمرير عند تجاوز Row
• Modifier.weight — يوزع المساحة بشكل متناسب
• Arrangement.SpaceBetween — توزيع تكيفي مع تثبيت عند الحواف