0Pricing
Kotlin Multiplatform Academy · บทเรียน

เปิดใช้ Compose Multiplatform

เพิ่มปลั๊กอินและ composable shared แรกของคุณ

เปิดใช้ Compose Multiplatform เป็นบทเรียน Kotlin Multiplatform Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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. 🚀

คำถามที่พบบ่อย

บทเรียน “เปิดใช้ Compose Multiplatform” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เปิดใช้ Compose Multiplatform” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Kotlin Multiplatform Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Kotlin Multiplatform Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เปิดใช้ Compose Multiplatform”

เพิ่มปลั๊กอินและ composable shared แรกของคุณ คุณปฏิบัติ Kotlin Multiplatform Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Kotlin Multiplatform Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Kotlin Multiplatform Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “เปิดใช้ Compose Multiplatform” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Kotlin Multiplatform Academy นี้ได้ไหม

ได้ บทเรียน Kotlin Multiplatform Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. เปิดใช้ Compose Multiplatform
  2. เลย์เอาต์ โมดิไฟเออร์ และธีม
  3. สถานะและการจัดองค์ประกอบใหม่ใน UI shared
  4. โฮสต์ UI shared บน iOS และเดสก์ท็อป
← กลับไปที่ Kotlin Multiplatform Academy