Kotlin Multiplatform Academy · Pelajaran

Mengaktifkan Compose Multiplatform

Tambahkan plugin dan composable bersama pertama Anda

Pelajaran 1 dari 413 langkah

Mengaktifkan Compose Multiplatform adalah pelajaran Kotlin Multiplatform Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Kotlin Multiplatform Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Kotlin Multiplatform Academy mencakup 4 pelajaran total.

Satu UI, Setiap Layar

Compose Multiplatform memungkinkan Anda mendeskripsikan UI sekali dalam Kotlin dan merendernya di Android, iOS, serta desktop. Kode layar yang sama berjalan di mana saja. 🎉

Dibangun di Atas Jetpack Compose

Jika Anda mengenal Jetpack Compose, Anda sudah mengetahui sebagian besar materi ini. Compose Multiplatform menghadirkan perangkat kerja deklaratif yang sama ke setiap target yang Anda dukung.

Tambahkan Plugin Compose

Aktifkan dengan menambahkan plugin Gradle Compose bersama plugin Kotlin Multiplatform di modul bersama Anda. Dengan begitu, API composable dapat digunakan.

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

Tambahkan BOM Compose

Dependensi Compose tersedia melalui satu pengakses. Tambahkan pustaka runtime, foundation, dan material dari ekstensi compose agar versinya tetap selaras.

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

Composable Bersama Pertama Anda

Composable hanyalah fungsi Kotlin yang ditandai dengan @Composable. Letakkan di commonMain agar langsung tersedia untuk semua platform.

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

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

Composable Aplikasi Utama

Sebagian besar proyek menyediakan satu composable App tingkat atas dalam kode bersama. Setiap platform cukup memanggilnya, sehingga seluruh pohon UI dapat digunakan bersama.

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

Tema Material Ikut Tersedia

Compose Multiplatform menyediakan komponen dan tema Material, sehingga tombol, kolom teks, dan warna tampak konsisten di berbagai platform sejak awal.

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

Android Menampungnya Secara Native

Di Android, pasang App bersama di dalam Activity menggunakan setContent, persis seperti aplikasi Compose biasa. Tidak diperlukan hal khusus.

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

iOS dan Desktop Juga Dapat Terhubung

iOS dan desktop masing-masing memiliki titik masuk kecil yang menampung composable App yang sama. Anda menulis layar sekali dan menampungnya dari setiap target.

Pratinjau Langsung Tetap Berfungsi

Anda tetap dapat melakukan iterasi dengan cepat menggunakan @Preview di IDE, sehingga dapat melihat composable bersama dirender tanpa menjalankan build perangkat lengkap setiap kali.

Hal yang Kini Dapat Dilakukan

Dengan Compose aktif, UI Anda bergabung dengan logika dalam kode bersama. Hasilnya adalah satu basis kode yang menggerakkan layar dengan tampilan piksel identik di ponsel dan desktop.

Pemeriksaan Singkat

Di mana composable bersama seharusnya diletakkan?

Jawab di pelajaran interaktif

Rangkuman: Compose di Mana Saja

Anda mengaktifkan plugin Compose, menulis composable bersama di commonMain, membungkusnya dalam MaterialTheme, dan melihat bagaimana setiap platform menampung App yang sama. Satu UI, setiap layar. 🚀

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengaktifkan Compose Multiplatform” gratis?

Ya — teks lengkap “Mengaktifkan Compose Multiplatform” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Kotlin Multiplatform Academy, upgrade ke CoddyKit PRO. Kursus Kotlin Multiplatform Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengaktifkan Compose Multiplatform”?

Tambahkan plugin dan composable bersama pertama Anda Kamu berlatih Kotlin Multiplatform Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Kotlin Multiplatform Academy?

Tidak diperlukan pengalaman sebelumnya. Kotlin Multiplatform Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Mengaktifkan Compose Multiplatform” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Kotlin Multiplatform Academy ini?

Ya. Setiap pelajaran Kotlin Multiplatform Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Kotlin Multiplatform Academy