Android Academy · درس

أساسيات Text وColumn

اعرض المحتوى ورتّبه عموديًا

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

Composable النص

أبسط شيء يمكنك عرضه في Compose هو النص. ترسم composable المسماة Text سلسلة نصية على الشاشة.

تمرر السلسلة النصية التي تريد عرضها باعتبارها الوسيطة الأولى. هذا كل ما يلزم لعرض الكلمات على الشاشة.

@Composable
fun Hello() {
    Text("Hello, Android!")
}

تنسيق النص

تقبل Text معاملات لتغيير مظهرها. ويمكنك ضبط fontSize وcolor وfontWeight.

تستخدم الأحجام وحدة sp، التي تتكيف مع إعدادات الخط لدى المستخدم. وهذا يحافظ على سهولة قراءة تطبيقك للجميع.

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

لماذا تحتاج إلى تخطيط؟

إذا استدعيت Text مرتين متتاليتين، فسيظهر النصان في الموضع نفسه، فوق أحدهما الآخر. لا ترتب composables نفسها تلقائيًا.

لوضع العناصر بالترتيب، تحتاج إلى composable للتخطيط تنظم عناصرها الفرعية. وأكثرها شيوعًا للتكديس الرأسي هي Column.

Composable المسماة Column

ترتب Column عناصرها الفرعية رأسيًا، بحيث يأتي كل عنصر أسفل الآخر. وتضع composables الفرعية داخل كتلة lambda اللاحقة لها.

كل composable تكتبها داخل الأقواس المعقوفة تصبح صفًا في ذلك التكديس الرأسي، وفق ترتيب كتابتها.

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

الترتيب مهم في Column

داخل Column، تظهر العناصر الفرعية من الأعلى إلى الأسفل بالترتيب نفسه الذي تسردها به تمامًا. انقل سطرًا إلى الأعلى في التعليمات البرمجية، فينتقل إلى الأعلى على الشاشة.

يجعل ذلك التخطيطات قابلة للتوقع: اقرأ التعليمات البرمجية من الأعلى إلى الأسفل، وستعرف شكل الشاشة من الأعلى إلى الأسفل.

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

الترتيب الرأسي

يمكن لـ Column التحكم في المسافات بين عناصرها الفرعية باستخدام verticalArrangement. فعلى سبيل المثال، تضيف Arrangement.spacedBy فجوات متساوية.

وهذا أنظف من إضافة مسافة إلى كل عنصر فرعي يدويًا، ويحافظ على اتساق التخطيط.

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("One")
    Text("Two")
}

المحاذاة الأفقية

تحاذي Column عناصرها الفرعية افتراضيًا إلى البداية (اليسار). استخدم horizontalAlignment لتوسيطها أو محاذاتها إلى النهاية.

اضبطها على Alignment.CenterHorizontally لتوسيط كل عنصر فرعي داخل عرض العمود.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

تعرّف على Row

تُرتّب Column العناصر عموديًا، بينما ترتّب شقيقتها Row العناصر جنبًا إلى جنب أفقيًا. كلاهما يعتمد على الفكرة نفسها، لكن في اتجاهين مختلفين.

ستجمع بين Rows وColumns لإنشاء الشبكات والبطاقات. تذكّر الآن: تكون Column إلى الأسفل، وRow عبر العرض.

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

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

يمكن أن تحتوي التخطيطات على تخطيطات أخرى. يمكنك وضع Row داخل Column لإنشاء تصميمات أكثر ثراءً.

يعرض العمود هنا عنوانًا، ثم صفًا يحتوي على جزأين من النص تحته. هكذا تُبنى الشاشات المعقدة من أجزاء بسيطة.

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

إضافة مسافة بين العناصر

لإضافة فجوة ثابتة بين عنصرين قابلين للتركيب، يمكنك إدراج Spacer. وهو عنصر قابل للتركيب فارغ يقتصر دوره على حجز مساحة.

حدّد له ارتفاعًا باستخدام modifier، وسيُزيح العنصر التالي إلى الأسفل. سنتناول modifiers بمزيد من التفصيل في الدرس التالي.

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

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

باستخدام Text وColumn، يمكنك بالفعل إنشاء شاشة بسيطة تحمل تسميات. رتّب عنوانًا وسطرين من التفاصيل فوق بعضهما.

يمثّل هذا النمط الصغير الأساس الذي تُبنى عليه معظم شاشات Compose التي ستكتبها.

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

اختبار سريع

لنتحقق من مدى فهمك لاتجاه التخطيط.

مراجعة

تعلّمت عرض السلاسل النصية باستخدام Text وتنسيقها باستخدام fontSize وfontWeight. ترتّب Column العناصر الفرعية عموديًا وفق ترتيبها في الشيفرة، بينما ترتّبها Row أفقيًا.

يمكنك التحكم في التباعد باستخدام verticalArrangement أو Spacer، ومحاذاة العناصر الفرعية باستخدام horizontalAlignment. ويؤدي تداخل Rows وColumns إلى إنشاء تخطيطات أكثر ثراءً. في الخطوة التالية، ستعاين هذه الشاشات من دون تشغيل التطبيق.

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

هل درس «أساسيات Text وColumn» مجاني؟

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

ماذا ستتعلم في «أساسيات Text وColumn»؟

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

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

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

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

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

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

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

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

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