Jetpack Compose Academy · Pelajaran

Pengaturan & Perataan

Posisikan dan beri jarak pada child dengan tepat.

Pelajaran 4 dari 413 langkah

Pengaturan & Perataan adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Dua Istilah, Dua Tugas

Pengaturan tata letak bergantung pada pengaturan dan perataan. Keduanya terdengar mirip, tetapi memiliki tugas yang berbeda. Mari kita bedakan. 🧭

Pengaturan: Sepanjang Sumbu Utama

Pengaturan mengatur jarak sepanjang sumbu utama tata letak: vertikal untuk Kolom dan horizontal untuk Baris.

Perataan: Melintasi Sumbu Silang

Perataan mengatur posisi pada sumbu lainnya: horizontal dalam Kolom dan vertikal dalam Baris. Perataan menyusun anak-anak dari sisi ke sisi.

Mengelompokkan di Salah Satu Ujung

Arrangement.Top, Center, dan Bottom mengelompokkan anak-anak di salah satu ujung Kolom, sementara sisanya menjadi ruang kosong.

Column(verticalArrangement = Arrangement.Center) {
    Text("A")
    Text("B")
}

Menyebarkan Anak-Anak

Gunakan SpaceBetween, SpaceAround, atau SpaceEvenly untuk membagikan ruang tambahan di antara anak-anak, alih-alih menumpuknya.

Row(horizontalArrangement = Arrangement.SpaceEvenly) {
    Text("A")
    Text("B")
    Text("C")
}

SpaceBetween vs SpaceEvenly

SpaceBetween menempelkan anak-anak ke tepi tanpa celah luar, sedangkan SpaceEvenly menambahkan celah yang sama di semua tempat, termasuk sebelum anak pertama dan setelah anak terakhir.

Celah Tetap dengan spacedBy

Untuk celah yang konsisten, gunakan Arrangement.spacedBy. Pengaturan ini menyisipkan jarak persis yang Anda berikan di antara setiap anak yang bersebelahan.

Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
    Text("A")
    Text("B")
}

Perataan Sumbu Silang Kolom

Dalam Kolom, sumbu silang bersifat horizontal, sehingga horizontalAlignment memilih Start, CenterHorizontally, atau End untuk anak-anak.

Column(horizontalAlignment = Alignment.End) {
    Text("Right side")
}

Perataan Sumbu Silang Baris

Dalam Baris, sumbu silang bersifat vertikal, sehingga verticalAlignment memilih Top, CenterVertically, atau Bottom untuk anak-anak.

Row(verticalAlignment = Alignment.Bottom) {
    Text("Aligned bottom")
}

Menggabungkan Keduanya untuk Tata Letak

Biasanya Anda menetapkan keduanya sekaligus: pengaturan memberi jarak antar-anak di sepanjang sumbu utama, sedangkan perataan menempatkannya pada sumbu silang.

Column(
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) { Text("Dead center") }

Efek Memerlukan Ruang Tambahan

Pengaturan hanya terlihat saat wadah berukuran lebih besar daripada anak-anaknya. Kolom dengan konten yang membungkus ukurannya tidak memiliki ruang tersisa untuk dibagikan ulang.

Pemeriksaan Singkat

Mari pastikan sumbu mana yang dikendalikan oleh setiap pengaturan.

Ringkasan: Pengaturan dan Perataan

Anda telah memahami pembagiannya: pengaturan memberi jarak antar-anak di sepanjang sumbu utama, sedangkan perataan menempatkannya pada sumbu silang. Gabungkan keduanya untuk tata letak yang presisi.

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

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengaturan & Perataan” gratis?

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

Apa yang akan aku pelajari di “Pengaturan & Perataan”?

Posisikan dan beri jarak pada child dengan tepat. Kamu berlatih Jetpack Compose 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 Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose 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 4 dari 4.

Berapa lama pelajaran “Pengaturan & Perataan” 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 Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose 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

  1. Column: Menumpuk Secara Vertikal
  2. Row: Menempatkan Berdampingan
  3. Box: Melapisi & Menumpuk
  4. Pengaturan & Perataan
← Kembali ke Jetpack Compose Academy