Column, Row, dan Box
Susun composable dalam tata letak umum.
Column, Row, dan Box adalah pelajaran Android 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 Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.
Menata Composable
Untuk menempatkan composable secara relatif satu sama lain, Compose menyediakan tiga composable tata letak utama: Column, Row, dan Box.
Column: Susunan Vertikal
Column menyusun turunannya secara vertikal, dari atas ke bawah.
Column {
Text("First")
Text("Second")
Text("Third")
}Row: Susunan Horizontal
Row menempatkan turunannya berdampingan, dari kiri ke kanan.
Row {
Text("Left")
Text("Middle")
Text("Right")
}Box: Saling Bertumpuk
Box menyusun turunan di atas satu sama lain, seperti lapisan. Turunan yang ditulis belakangan digambar di atas turunan sebelumnya. Cocok untuk lencana, lapisan penutup, dan latar belakang.
Box {
Image(
painter = painterResource(R.drawable.photo),
contentDescription = null
)
Text("Caption")
}Turunan Adalah Lambda Konten
Setiap tata letak menerima lambda konten di bagian akhir. Composable apa pun yang Anda panggil di dalamnya menjadi turunannya. Tidak ada XML — turunan hanyalah pemanggilan fungsi.
Menumpuk Tata Letak
Tata letak dapat ditumpuk dengan bebas. Letakkan Row di dalam Column untuk membuat struktur seperti kisi atau daftar baris.
Column {
Row {
Text("A")
Text("B")
}
Row {
Text("C")
Text("D")
}
}Column vs LinearLayout
Jika Anda pernah menggunakan XML, Column mirip LinearLayout vertikal dan Row mirip yang horizontal. Box mirip FrameLayout sederhana.
Ukuran Bawaan
Secara bawaan, tata letak hanya sebesar turunannya (membungkus konten). Anda dapat membuatnya memenuhi ruang yang tersedia dengan modifier seperti Modifier.fillMaxSize(), yang dibahas pada pelajaran berikutnya.
contentAlignment di Box
Box dapat meratakan semua turunannya dengan contentAlignment. Misalnya, menempatkan semuanya di tengah.
Box(contentAlignment = Alignment.Center) {
Text("Centered")
}Memilih yang Tepat
Pilih berdasarkan arah: Column untuk vertikal, Row untuk horizontal, dan Box untuk tumpang-tindih atau memusatkan satu turunan. Sebagian besar layar menggabungkan ketiganya.
Menyatukan Semuanya
Tata letak profil sederhana yang menggunakan ketiganya.
@Composable
fun Profile() {
Column {
Box(contentAlignment = Alignment.Center) {
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = null
)
}
Row {
Text("Posts ")
Text("Followers")
}
}
}Pemeriksaan Singkat
Tata letak mana yang menyusun turunannya di atas satu sama lain (saling bertumpuk)?
Ringkasan
Tiga tata letak utama:
Column— susunan vertikal.Row— susunan horizontal.Box— lapisan yang saling bertumpuk;contentAlignmentmemusatkan konten.
Ketiganya dapat ditumpuk dengan bebas untuk membangun layar apa pun.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Column, Row, dan Box” gratis?
Ya — teks lengkap “Column, Row, dan Box” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Column, Row, dan Box”?
Susun composable dalam tata letak umum. Kamu berlatih Android 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 Android Academy?
Tidak diperlukan pengalaman sebelumnya. Android 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 “Column, Row, dan Box” 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 Android Academy ini?
Ya. Setiap pelajaran Android 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
- Column, Row, dan Box
- Sistem Modifier
- Perataan dan Penataan
- List dengan LazyColumn