Android Academy · درس

ضبط المسافات باستخدام Padding

استخدم Modifier لضبط المسافات

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

ما المقصود بـ Padding؟

إنّ Padding مساحة فارغة تُضاف حول محتوى composable. وهي تدفع المحتوى بعيدًا عن الحواف حتى لا يبدو مزدحمًا.

في Compose، تضيفون padding من خلال Modifier.

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

وحدة dp

تستخدم أحجام padding الوحدة dp، وهي اختصار للبكسلات المستقلة عن الكثافة. وتبدو dp بالحجم الفعلي نفسه على كل شاشة.

اكتبوا رقمًا ثم .dp، مثل 8.dp أو 24.dp.

Modifier.padding(8.dp)

ما المقصود بـ Modifier؟

يصف Modifier مظهر composable وسلوكه، مثل حجمه وpadding وخلفيته وغير ذلك.

تنشئون modifiers من خلال ربط الدوال معًا باستخدام النقاط.

Modifier
    .padding(16.dp)
    .background(Color.Yellow)

Padding من جميع الجهات

يؤدي استدعاء padding(16.dp) بقيمة واحدة إلى إضافة المساحة نفسها من الجهات الأربع: الأعلى والأسفل والبداية والنهاية.

هذه أسرع طريقة لمنح المحتوى مساحة مريحة.

Box(
    modifier = Modifier.padding(16.dp)
) {
    Text("Inside")
}

Padding أفقي ورأسي

يمكنكم ضبط الجهات بصورة منفصلة باستخدام المعلمتين horizontal وvertical.

يشمل Horizontal الجهتين start وend، بينما يشمل vertical الجهتين top وbottom.

Modifier.padding(
    horizontal = 24.dp,
    vertical = 8.dp
)

إضافة Padding إلى جهة واحدة

لاستهداف حافة واحدة، سمّوها: start أو top أو end أو bottom.

يتيح لكم ذلك ضبط المسافات بدقة في الموضع المطلوب.

Modifier.padding(
    start = 16.dp,
    top = 4.dp
)

الترتيب مهم

يغيّر ترتيب Modifier النتيجة. يؤدي وضع padding قبل background إلى إبقاء منطقة padding من دون رسم، بينما تملأ الخلفية منطقة padding عند وضعه بعده.

اقرؤوا modifiers من الأعلى إلى الأسفل، مثل الطبقات.

Modifier
    .background(Color.Cyan)
    .padding(16.dp)

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

داخل Column أو Row، استخدموا Arrangement.spacedBy لإضافة فجوات متساوية بين العناصر الفرعية تلقائيًا.

هذا أنظف من إضافة padding يدويًا إلى كل عنصر فرعي.

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

Spacer للفجوات

إنّ Spacer composable فارغ يُستخدم لإبعاد العناصر بعضها عن بعض. امنحوه حجمًا باستخدام Modifier.

يفيد في إنشاء فجوة ثابتة بين عنصرين.

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

Padding مقابل Margin

لا يحتوي Compose على margin منفصل. تنشئون المساحة الخارجية بوضع padding في موضع أبكر ضمن سلسلة modifier، قبل الحجم أو الخلفية.

لذلك تتولى أداة واحدة، وهي padding، المسافات الداخلية والخارجية وفقًا لترتيبها.

Modifier
    .padding(16.dp)
    .background(Color.LightGray)
    .padding(8.dp)

مسافات متسقة

تستخدم التطبيقات الجيدة بضع قيم متكررة، مثل 4 و8 و16 و24 dp. يحافظ ذلك على ترتيب التخطيطات وقابليتها للتوقع.

تجنبوا الأرقام العشوائية، واختاروا القيم من مقياس صغير.

Modifier.padding(16.dp)

اختبار سريع

اختبروا معرفتكم بـ padding.

مراجعة

يضيف Padding مساحة حول المحتوى باستخدام Modifier.padding وقيم بوحدة dp. ويمكنكم إضافة padding إلى جميع الجهات، أو أفقيًا ورأسيًا، أو إلى حواف منفردة.

ترتيب Modifier مهم، كما يتولى Arrangement.spacedBy أو Spacer معالجة الفجوات بين العناصر.

بعد ذلك، ستستكشفون الألوان وMaterialTheme.

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

هل درس «ضبط المسافات باستخدام Padding» مجاني؟

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

ماذا ستتعلم في «ضبط المسافات باستخدام Padding»؟

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

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

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

كم من الوقت يستغرق درس «ضبط المسافات باستخدام Padding»؟

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

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

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

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

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