Kotlin Multiplatform Academy · Pelajaran

Susun Atur, Pengubah Suai dan Tema

Bina skrin shared adaptif dengan Material.

Pelajaran 2 daripada 413 langkah

Susun Atur, Pengubah Suai dan Tema ialah pelajaran Kotlin Multiplatform Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Kotlin Multiplatform Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Kotlin Multiplatform Academy merangkumi sejumlah 4 pelajaran.

Tiga Blok Pembinaan Susun Atur

Hampir setiap skrin dibina daripada Column, Row dan Box. Column menyusun anak secara menegak, Row meletakkannya bersebelahan, manakala Box melapiskannya.

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

Row Meletakkan Item Bersebelahan

Row menyusun anaknya secara mendatar. Gunakannya apabila anda mahu label dan nilai, atau ikon di sebelah teks, pada satu baris.

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

Box untuk Melapiskan

Box menindihkan anaknya pada tempat yang sama. Ia sesuai untuk lencana di atas avatar atau teks yang dipusatkan di atas imej.

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

Pengubah Membentuk Segalanya

Modifier melaraskan saiz, jarak, latar belakang dan banyak lagi. Anda merangkaikan panggilan mengikut turutan, dan turutan itu benar-benar mengubah hasilnya.

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

Turutan Penting dalam Rangkaian

Pengubah digunakan dari atas ke bawah. Padding sebelum background mengecilkan kawasan warna, manakala background sebelum padding mengisi ruang di belakang padding. Bacanya seperti langkah-langkah.

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

Isi dan Saizkan Ruang

Gunakan fillMaxWidth, fillMaxSize atau saiz tetap untuk mengawal jumlah ruang yang dituntut oleh komponen boleh gubah dalam susun atur induknya.

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

Susunan dan Penjajaran

Parameter susun atur seperti Arrangement dan Alignment menentukan kedudukan anak, contohnya memusatkan Row atau menjarakkan item secara sekata di sepanjangnya.

Row(
    horizontalArrangement = Arrangement.SpaceBetween
) { }

Tema dengan MaterialTheme

Bungkus aplikasi anda dalam MaterialTheme untuk menyediakan skema warna, tipografi dan bentuk. Setiap komponen Material membacanya secara automatik.

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

Baca Nilai Tema di Mana-mana

Di dalam tema, anda mengakses token melalui MaterialTheme.colorScheme dan tipografi, supaya penggayaan anda kekal konsisten merentas setiap skrin dikongsi.

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

Sesuaikan dengan Setiap Platform

Kod susun atur yang sama berjalan di mana-mana, namun anda boleh membuat cabang berdasarkan saiz atau platform untuk menjadikan skrin adaptif bagi telefon, tablet dan desktop.

Konsisten Secara Lalai

Oleh sebab susun atur, pengubah dan tema semuanya dikongsi, skrin Android dan iOS anda kelihatan sama tanpa sesiapa perlu menggandakan kerja penggayaan.

Semakan Pantas

Apakah fungsi Modifier?

Ringkasan: Susun Atur, Ubah, Tema

Anda menyusun UI dengan Column, Row dan Box, membentuknya dengan pengubah yang dirangkaikan, serta menggunakan MaterialTheme dikongsi supaya setiap platform kekal konsisten. 🎨

Percuma untuk bermula

Pelajari Kotlin dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
30
Pelajaran
120

Soalan Lazim

Adakah pelajaran “Susun Atur, Pengubah Suai dan Tema” percuma?

Ya — teks penuh “Susun Atur, Pengubah Suai dan Tema” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Kotlin Multiplatform Academy, tingkat taraf kepada CoddyKit PRO. Kursus Kotlin Multiplatform Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Susun Atur, Pengubah Suai dan Tema”?

Bina skrin shared adaptif dengan Material. Anda berlatih Kotlin Multiplatform Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Kotlin Multiplatform Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Kotlin Multiplatform Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Susun Atur, Pengubah Suai dan Tema” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Kotlin Multiplatform Academy ini?

Ya. Setiap pelajaran Kotlin Multiplatform Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Dayakan Compose Multiplatform
  2. Susun Atur, Pengubah Suai dan Tema
  3. Keadaan dan Gubahan Semula dalam UI Shared
  4. Hoskan UI Shared pada iOS dan Desktop
← Kembali ke Kotlin Multiplatform Academy