Jetpack Compose Academy · درس

‏Row: وضع العناصر جنبًا إلى جنب

رتّب العناصر الفرعية من اليسار إلى اليمين

‏Row: وضع العناصر جنبًا إلى جنب درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Side by Side

When you want children in a horizontal line, you use a Row. It is the sideways sibling of Column. ➡️

Your First Row

A Row takes a trailing lambda just like Column. Each child you call inside lands next to the previous one, left to right.

Row {
    Text("Left")
    Text("Right")
}

Order Is Left to Right

Children flow in source order across the screen. The first Composable sits at the start, the next beside it, and so on.

A Classic Icon Plus Label

Rows shine for small pairs, like an Icon next to a Text label. That side-by-side combo is everywhere in real apps.

Row {
    Icon(Icons.Default.Star, null)
    Text("Favorite")
}

Spacing Between Children

Use horizontalArrangement with spacedBy to drop an even gap between each child instead of padding them one by one.

Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

Aligning Children Vertically

Set verticalAlignment to line children up across the row's height. CenterVertically keeps an icon and tall text neatly centered.

Row(verticalAlignment = Alignment.CenterVertically) {
    Icon(Icons.Default.Star, null)
    Text("Centered")
}

Pushing Items Apart

Arrangement.SpaceBetween pins the first child to the start and the last to the end, spreading any extra space between them.

Row(horizontalArrangement = Arrangement.SpaceBetween) {
    Text("Start")
    Text("End")
}

Sharing Space with Weight

Give a child weight in its modifier to make it claim the leftover width. Two equal weights split the row evenly.

Row {
    Text("Half", Modifier.weight(1f))
    Text("Half", Modifier.weight(1f))
}

Rows Don't Scroll Yet

A plain Row does not scroll. Children that overflow the width get clipped, so keep a basic Row to content that fits.

Adding Horizontal Scroll

For wide content, attach horizontalScroll to the Row's modifier and the whole strip becomes swipeable sideways.

Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
    Text("Wide content")
}

Rows Inside Columns

Most screens combine both. A Column stacks sections vertically while each section uses a Row to lay its pieces side by side.

Quick Check

Let's confirm how a Row lays out its children.

Recap: Row

You learned Row: it places children left to right, uses arrangement and alignment to position them, and shares width with weight for flexible layouts.

الأسئلة الشائعة

هل درس «‏Row: وضع العناصر جنبًا إلى جنب» مجاني؟

نعم — نص درس «‏Row: وضع العناصر جنبًا إلى جنب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏Row: وضع العناصر جنبًا إلى جنب»؟

رتّب العناصر الفرعية من اليسار إلى اليمين تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟

لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «‏Row: وضع العناصر جنبًا إلى جنب»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟

نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Jetpack Compose Academy