Jetpack Compose Academy · درس

‏weight وتحديد الحجم المرن

وزّع المساحة تناسبيًا في الصفوف والأعمدة

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

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

Flexible Space

Sometimes you want children to share space, not take fixed sizes. The weight modifier divides leftover room proportionally. ⚖️

Where weight Lives

weight works only inside a Row or Column. It is part of the layout scope those containers provide to their children.

Equal Split

Give two children the same weight and they share the space evenly, each taking half of what is available.

Box(Modifier.weight(1f))
Box(Modifier.weight(1f))

Uneven Split

Weights are ratios. A child with weight(2f) gets twice the space of a sibling with weight(1f).

Box(Modifier.weight(2f))
Box(Modifier.weight(1f))

Fixed Plus Flexible

Mix and match: give one child a fixed size and let another use weight to absorb whatever space remains.

Box(Modifier.width(80.dp))
Box(Modifier.weight(1f))

Push to the Edge

A single weight on a spacer acts like a push, sending the next child all the way to the far end of the row.

Text("Left")
Spacer(Modifier.weight(1f))
Text("Right")

Weights Run First

Compose measures fixed children first, then splits the leftover space among weighted ones. That is why weight needs siblings to push against.

The fill Flag

By default a weighted child fills its share. Pass fill = false to let it stay smaller than the space it was given.

Modifier.weight(1f, fill = false)

Weighted Columns

The same idea works vertically. In a Column, weight divides the leftover height instead of width.

Column {
  Box(Modifier.weight(1f))
  Box(Modifier.weight(1f))
}

Responsive by Design

Because weights are ratios, your layout scales gracefully across phone and tablet widths without hardcoded numbers.

A Common Pattern

Label on the left, value filling the rest: a weighted row is the classic recipe for clean settings and list rows.

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

Quick Check

Two children sit in a Row with weight(3f) and weight(1f). How is the space shared?

Recap

You can now share space flexibly. weight splits leftover room by ratio inside Rows and Columns for responsive layouts. 🎯

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

هل درس «‏weight وتحديد الحجم المرن» مجاني؟

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

ماذا ستتعلم في «‏weight وتحديد الحجم المرن»؟

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

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

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

كم من الوقت يستغرق درس «‏weight وتحديد الحجم المرن»؟

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

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

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

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

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