Tata Letak, Modifier & Tema
Bangun layar bersama yang adaptif dengan Material
Tata Letak, Modifier & Tema adalah pelajaran Kotlin Multiplatform Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Tiga Blok Penyusun Tata Letak
Hampir setiap layar dibangun dari Column, Row, dan Box. Column menumpuk anak secara vertikal, Row menempatkannya berdampingan, dan Box melapisinya.
Column {
Text("Top")
Text("Bottom")
}Row Menempatkan Item Berdampingan
Row mengatur elemen anaknya secara horizontal. Gunakan saat Anda ingin menempatkan label dan nilai, atau ikon di samping teks, dalam satu baris.
Row {
Text("Price:")
Text("$9")
}Box untuk Menumpuk
Box menindih elemen anaknya di tempat yang sama. Komponen ini cocok untuk lencana di atas avatar atau teks yang dipusatkan di atas gambar.
Box {
Image(painter, null)
Text("New")
}Modifier Membentuk Segalanya
Modifier menyesuaikan ukuran, jarak, latar belakang, dan lainnya. Anda merangkai pemanggilan secara berurutan, dan urutannya benar-benar mengubah hasilnya.
Text(
"Hi",
modifier = Modifier.padding(16.dp)
)Urutan Penting dalam Rangkaian
Modifier diterapkan dari atas ke bawah. Padding sebelum background membuat warna masuk ke dalam, sedangkan background sebelum padding mengisi area di balik padding. Bacalah seperti langkah-langkah.
Modifier
.background(Blue)
.padding(8.dp)Isi dan Atur Ukuran Ruang
Gunakan fillMaxWidth, fillMaxSize, atau ukuran tetap untuk mengatur seberapa banyak ruang yang diambil composable di dalam tata letak induknya.
Column(Modifier.fillMaxSize()) {
Text("Stretched")
}Pengaturan dan Perataan
Parameter tata letak seperti Arrangement dan Alignment menentukan posisi elemen anak, misalnya memusatkan Row atau memberi jarak merata antaritem di dalamnya.
Row(
horizontalArrangement = Arrangement.SpaceBetween
) { }Menerapkan Tema dengan MaterialTheme
Bungkus aplikasi Anda dengan MaterialTheme untuk menyediakan skema warna, tipografi, dan bentuk. Setiap komponen Material membacanya secara otomatis.
MaterialTheme(colorScheme = darkColorScheme()) {
App()
}Baca Nilai Tema di Mana Saja
Di dalam tema, Anda mengakses token melalui MaterialTheme.colorScheme dan tipografi, sehingga gaya tetap konsisten di setiap layar bersama.
Text(
"Title",
color = MaterialTheme.colorScheme.primary
)Sesuaikan dengan Setiap Platform
Kode tata letak yang sama berjalan di mana saja, tetapi Anda dapat membuat percabangan berdasarkan ukuran atau platform agar layar adaptif untuk ponsel, tablet, dan desktop.
Konsisten Secara Bawaan
Karena tata letak, modifier, dan tema digunakan bersama, layar Android dan iOS Anda tampak sama tanpa ada yang menggandakan pekerjaan penataan gaya.
Pemeriksaan Singkat
Apa fungsi Modifier?
Rangkuman: Tata Letak, Modifikasi, Tema
Anda menyusun UI dengan Column, Row, dan Box, membentuknya dengan modifier berantai, lalu menerapkan MaterialTheme bersama agar setiap platform tetap konsisten. 🎨
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
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tata Letak, Modifier & Tema” gratis?
Ya — teks lengkap “Tata Letak, Modifier & Tema” 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 “Tata Letak, Modifier & Tema”?
Bangun layar bersama yang adaptif dengan Material 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 2 dari 4.
Berapa lama pelajaran “Tata Letak, Modifier & Tema” 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
- Mengaktifkan Compose Multiplatform
- Tata Letak, Modifier & Tema
- Status & Rekomposisi dalam UI Bersama
- Menampung UI Bersama di iOS & Desktop