0Pricing
Kotlin Multiplatform Academy · درس

التخطيطات وModifiers وتنسيق الواجهة

إنشاء شاشات مشتركة متكيفة باستخدام Material

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

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

Three Layout Building Blocks

Almost every screen is built from Column, Row and Box. Column stacks children vertically, Row places them side by side, Box layers them.

Column {
    Text("Top")
    Text("Bottom")
}

Rows Place Items Side by Side

A Row arranges its children horizontally. Reach for it when you want a label and a value, or an icon next to text, on one line.

Row {
    Text("Price:")
    Text("$9")
}

Box for Stacking

A Box overlaps its children on the same spot. It is perfect for a badge on top of an avatar or text centered over an image.

Box {
    Image(painter, null)
    Text("New")
}

Modifiers Shape Everything

A Modifier adjusts size, spacing, background and more. You chain calls in order, and the order genuinely changes the result.

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

Order Matters in Chains

Modifiers apply top to bottom. Padding before background insets the color, while background before padding fills behind the padding. Read them like steps.

Modifier
    .background(Blue)
    .padding(8.dp)

Fill and Size the Space

Use fillMaxWidth, fillMaxSize or fixed size to control how much room a composable claims inside its parent layout.

Column(Modifier.fillMaxSize()) {
    Text("Stretched")
}

Arrangement and Alignment

Layout parameters like Arrangement and Alignment position children, for example centering a Row or spacing items evenly across it.

Row(
    horizontalArrangement = Arrangement.SpaceBetween
) { }

Theming with MaterialTheme

Wrap your app in MaterialTheme to supply a color scheme, typography and shapes. Every Material component reads from it automatically.

MaterialTheme(colorScheme = darkColorScheme()) {
    App()
}

Read Theme Values Anywhere

Inside the theme you access tokens through MaterialTheme.colorScheme and typography, so your styling stays consistent across every shared screen.

Text(
    "Title",
    color = MaterialTheme.colorScheme.primary
)

Adapt to Each Platform

The same layout code runs everywhere, yet you can branch on size or platform to make screens adaptive for phones, tablets and desktops.

Consistent by Default

Because layouts, modifiers and theming are all shared, your Android and iOS screens look the same without anyone duplicating styling work.

Quick Check

What does a Modifier do?

Recap: Layout, Modify, Theme

You stacked UI with Column, Row and Box, shaped it with chained modifiers, and applied a shared MaterialTheme so every platform stays consistent. 🎨

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

هل درس «التخطيطات وModifiers وتنسيق الواجهة» مجاني؟

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

ماذا ستتعلم في «التخطيطات وModifiers وتنسيق الواجهة»؟

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

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

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

كم من الوقت يستغرق درس «التخطيطات وModifiers وتنسيق الواجهة»؟

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

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

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

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

  1. تمكين Compose Multiplatform
  2. التخطيطات وModifiers وتنسيق الواجهة
  3. الحالة وإعادة التركيب في الواجهة المشتركة
  4. استضافة الواجهة المشتركة على iOS وDesktop
← العودة إلى Kotlin Multiplatform Academy