Android Academy · Pelajaran

Column, Row dan Box

Susun composable dalam reka letak biasa.

Pelajaran 1 daripada 413 langkah

Column, Row dan Box ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Menyusun Composable

Untuk meletakkan composable secara relatif antara satu sama lain, Compose menyediakan tiga composable susun atur teras: Column, Row dan Box.

Column: Susunan Menegak

Column menyusun anaknya secara menegak, dari atas ke bawah.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row: Susunan Mendatar

Row meletakkan anaknya bersebelahan, dari kiri ke kanan.

Row {
    Text("Left")
    Text("Middle")
    Text("Right")
}

Box: Bertindih

Box menyusun anaknya di atas satu sama lain, seperti lapisan. Anak yang kemudian dilukis di atas anak yang terdahulu. Sesuai untuk lencana, tindanan dan latar belakang.

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

Anak Ialah Lambda Kandungan

Setiap susun atur menerima lambda kandungan di penghujung. Apa-apa composable yang dipanggil di dalamnya menjadi anaknya. Tiada XML — anak hanyalah panggilan fungsi.

Menyarang Susun Atur

Susun atur boleh disarang secara bebas. Letakkan Row di dalam Column untuk membina struktur seperti grid atau senarai baris.

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column berbanding LinearLayout

Jika anda pernah menggunakan XML, Column adalah seperti LinearLayout menegak dan Row adalah seperti versi mendatarnya. Box adalah seperti FrameLayout ringkas.

Saiz Lalai

Secara lalai, susun atur hanya sebesar anaknya (balut kandungan). Anda boleh menjadikannya memenuhi ruang yang tersedia dengan pengubah suai seperti Modifier.fillMaxSize(), yang akan dibincangkan dalam pelajaran seterusnya.

contentAlignment dalam Box

Box boleh menjajarkan semua anaknya dengan contentAlignment. Contohnya, memusatkan segala-galanya.

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

Memilih yang Tepat

Pilih berdasarkan arah: Column untuk menegak, Row untuk mendatar dan Box untuk kandungan bertindih atau pemusatan satu anak. Kebanyakan skrin menggabungkan ketiga-tiganya.

Menggabungkan Semuanya

Susun atur profil ringkas menggunakan ketiga-tiganya.

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

Semakan Pantas

Susun atur manakah yang menyusun anaknya di atas satu sama lain (bertindih)?

Jawab dalam pelajaran interaktif

Imbas Kembali

Tiga susun atur teras:

Column — susunan menegak.
Row — susunan mendatar.
Box — lapisan bertindih; contentAlignment memusatkan kandungan.

Ketiga-tiganya boleh disarang secara bebas untuk membina apa-apa skrin.

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: 36
Pelajaran: 152

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Column, Row dan Box” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Column, Row dan Box”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Column, Row dan Box”?

Susun composable dalam reka letak biasa. Anda berlatih Android 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 Android Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Android 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 1 daripada 4.

Berapa lamakah pelajaran “Column, Row dan Box” 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 Android Academy ini?

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

← Kembali ke Android Academy