Kotlin Multiplatform Academy · درس

تمكين Compose Multiplatform

إضافة الإضافة وأول composable مشتركة لكم

الدرس 1 من 413 خطوة

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

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

One UI, Every Screen

Compose Multiplatform lets you describe your UI once in Kotlin and render it on Android, iOS and desktop. The same screen code runs everywhere. 🎉

Built on Jetpack Compose

If you know Jetpack Compose, you already know most of this. Compose Multiplatform brings that same declarative toolkit to every target you support.

Add the Compose Plugin

You enable it by adding the Compose Gradle plugin alongside the Kotlin Multiplatform plugin in your shared module. That unlocks the composable APIs.

plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose")
}

Pull In the Compose BOM

The Compose dependencies live behind a single accessor. You add the runtime, foundation and material libraries from the compose extension so versions stay aligned.

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation(compose.material3)
        }
    }
}

Your First Shared Composable

A composable is just a Kotlin function marked with @Composable. Put it in commonMain and it becomes available to every platform at once.

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name)
}

A Root App Composable

Most projects expose one top-level App composable in shared code. Each platform simply calls into it, so the whole UI tree is shared.

@Composable
fun App() {
    Greeting("KMP")
}

Material Theming Comes Along

Compose Multiplatform ships Material components and theming, so buttons, text fields and colors look consistent across platforms out of the box.

@Composable
fun App() {
    MaterialTheme {
        Greeting("KMP")
    }
}

Android Hosts It Natively

On Android you mount the shared App inside an Activity using setContent, exactly like a normal Compose app. Nothing special is required.

class MainActivity : ComponentActivity() {
    override fun onCreate(b: Bundle?) {
        super.onCreate(b)
        setContent { App() }
    }
}

iOS and Desktop Plug In Too

iOS and desktop each have a tiny entry point that hosts the same App composable. You write the screen once and host it from every target.

Live Previews Still Work

You keep fast iteration with @Preview in your IDE, so you see your shared composable render without launching a full device build each time.

What This Unlocks

With Compose enabled, your UI joins your logic in shared code. The result is one codebase driving pixel-identical screens on phones and desktops.

Quick Check

Where does a shared composable belong?

أجب عليها في الدرس التفاعلي

Recap: Compose Everywhere

You enabled the Compose plugin, wrote a shared composable in commonMain, wrapped it in MaterialTheme and saw how each platform hosts the same App. One UI, every screen. 🚀

البدء مجانًا

تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 30
الدروس: 120

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «تمكين Compose Multiplatform» مجاني؟

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

ماذا ستتعلم في «تمكين Compose Multiplatform»؟

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

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

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

كم من الوقت يستغرق درس «تمكين Compose Multiplatform»؟

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

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

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

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

← العودة إلى Kotlin Multiplatform Academy