Jetpack Compose Academy · Pelajaran

Box: Melapiskan & Bertindih

Susun kandungan dengan kawalan penjajaran.

Pelajaran 3 daripada 413 langkah

Box: Melapiskan & Bertindih ialah pelajaran Jetpack Compose Academy percuma di CoddyKit. Ini ialah pelajaran 3 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 Jetpack Compose Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Jetpack Compose Academy merangkumi sejumlah 4 pelajaran.

Disusun Bertindih

Apabila anak sepatutnya bertindih dan bukannya tersusun sebaris, gunakan Kotak. Ia melapiskan kandungan pada tempat yang sama. 🗂️

Kotak Pertama Anda

Kotak melukis anaknya mengikut susunan, setiap satunya di atas anak sebelumnya. Anak yang kemudian berada di atas anak terdahulu, seperti kad bertindan.

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

Susunan Z Mengikut Susunan Sumber

Anak terakhir yang anda tulis akan berada pada lapisan paling atas. Jadi, untuk meletakkan label di atas foto, letakkan Imej dahulu dan Text selepasnya.

Kotak Mengikut Saiz Anak Terbesarnya

Secara lalai, Kotak membungkus anak terbesarnya. Anak-anak lain diletakkan dalam ruang tersebut tanpa membesarkannya.

Menjajarkan Seluruh Kotak

Parameter contentAlignment menetapkan kedudukan lalai untuk setiap anak. Alignment.Tengah menarik semuanya ke bahagian tengah Kotak.

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

Menjajarkan Satu Anak

Dalam Kotak, setiap anak boleh menggunakan pengubah align untuk mengatasi tetapan lalai. Beginilah caranya menetapkan satu item pada penjuru.

Box {
    Text("Top end", Modifier.align(Alignment.TopEnd))
}

Lencana di Penjuru

Tindanan bersama align menghasilkan lencana klasik: avatar memenuhi Kotak, manakala titik kecil ditetapkan pada penjuru TopEnd.

Box {
    Avatar()
    Dot(Modifier.align(Alignment.TopEnd))
}

Teks di Atas Imej

Pola yang biasa digunakan ialah kapsyen di atas foto. Letakkan Imej dahulu, kemudian jajarkan Teks ke BottomStart supaya teks dibaca di atas imej.

Box {
    Image(painter, null)
    Text("Sunset", Modifier.align(Alignment.BottomStart))
}

Memenuhi Ruang dan Latar Belakang

Jadikan Kotak memenuhi ruang dengan fillMaxSize, kemudian tambahkan warna latar belakang. Kotak itu menjadi bekas berlapis yang berguna untuk seluruh skrin.

Box(Modifier.fillMaxSize().background(Color.Black)) {
    Text("Hi")
}

Sembilan Kedudukan Penjajaran

Kotak menyediakan sembilan kedudukan penjajaran, daripada TopStart hingga BottomEnd, dengan Center di tengah. Semua kedudukan yang diperlukan tersedia.

Bila Hendak Menggunakan Kotak

Pilih Kotak apabila beberapa bahagian berkongsi kawasan yang sama: tindanan, lencana, kapsyen atau pemutar yang dipusatkan di atas kandungan. Kotak ialah alat pelapisan anda.

Semakan Ringkas

Mari sahkan cara Kotak melapiskan anak-anaknya.

Ulang Kaji: Kotak

Anda telah mempelajari Kotak: ia menindan anak-anak pada kedudukan yang sama mengikut susunan dalam kod, mengambil saiz anak terbesarnya, serta menggunakan contentAlignment dan align untuk meletakkannya.

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 “Box: Melapiskan & Bertindih” percuma?

Ya — teks penuh “Box: Melapiskan & Bertindih” 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 Jetpack Compose Academy, tingkat taraf kepada CoddyKit PRO. Kursus Jetpack Compose Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Box: Melapiskan & Bertindih”?

Susun kandungan dengan kawalan penjajaran. Anda berlatih Jetpack Compose 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 Jetpack Compose Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Jetpack Compose 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 3 daripada 4.

Berapa lamakah pelajaran “Box: Melapiskan & Bertindih” 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 Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose 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. Column: Menyusun Secara Menegak
  2. Row: Meletakkan Bersebelahan
  3. Box: Melapiskan & Bertindih
  4. Susunan & Penjajaran
← Kembali ke Jetpack Compose Academy