Android Academy · درس

Column وRow وBox

رتّب composables ضمن تخطيطات شائعة

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

ترتيب Composables

لوضع composables بالنسبة إلى بعضها، يوفّر Compose ثلاثة composables أساسية للتخطيط: Column وRow وBox.

Column: تكديس عمودي

يكدّس Column عناصره الفرعية عموديًا من الأعلى إلى الأسفل.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row: تكديس أفقي

يضع Row عناصره الفرعية جنبًا إلى جنب من اليسار إلى اليمين.

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

Box: التراكب

يكدّس Box العناصر الفرعية فوق بعضها مثل الطبقات. تُرسم العناصر اللاحقة فوق العناصر السابقة. وهو مناسب للعلامات والشعارات المتراكبة والخلفيات.

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

العناصر الفرعية هي content lambdas

يأخذ كل تخطيط content lambda لاحقة. وأي composables تستدعيها بداخلها تصبح عناصره الفرعية. لا توجد XML — فالعناصر الفرعية ليست سوى استدعاءات دوال.

تداخل التخطيطات

يمكن تداخل التخطيطات بحرية. ضع Row داخل Column لإنشاء بنية شبيهة بالشبكة أو قائمة من الصفوف.

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column مقارنةً بـ LinearLayout

إذا سبق لك استخدام XML، فإن Column يشبه LinearLayout عموديًا، وRow يشبهه أفقيًا. أما Box فيشبه FrameLayout البسيط.

الحجم الافتراضي

يكون التخطيط افتراضيًا بحجم عناصره الفرعية فقط (wrap content). ويمكنك جعله يملأ المساحة المتاحة باستخدام معدِّلات مثل Modifier.fillMaxSize()، وهو ما ستتعلمه في الدرس التالي.

contentAlignment في Box

يمكن لـ Box محاذاة جميع عناصره الفرعية باستخدام contentAlignment. على سبيل المثال، يمكنك توسيط كل شيء.

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

اختيار العنصر المناسب

اختره بناءً على الاتجاه: استخدم Column للاتجاه العمودي، وRow للاتجاه الأفقي، وBox للعناصر المتراكبة أو لتوسيط عنصر واحد. تجمع معظم الشاشات بين العناصر الثلاثة.

تجميع العناصر معًا

تخطيط ملف شخصي صغير يستخدم العناصر الثلاثة.

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

تحقق سريع

أي تخطيط يكدّس عناصره الفرعية فوق بعضها (بتداخل)؟

مراجعة

التخطيطات الأساسية الثلاثة:

Column — تكديس عمودي.
Row — تكديس أفقي.
Box — طبقات متراكبة؛ ويعمل contentAlignment على توسيط المحتوى.

يمكن تداخلها بحرية لبناء أي شاشة.

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

هل درس «Column وRow وBox» مجاني؟

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

ماذا ستتعلم في «Column وRow وBox»؟

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

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

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

كم من الوقت يستغرق درس «Column وRow وBox»؟

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

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

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

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

← العودة إلى Android Academy