Jetpack Compose Academy · Pelajaran

Latar Belakang, Border & Pemotongan

Tambahkan warna, garis tepi, dan bentuk membulat.

Pelajaran 2 dari 413 langkah

Latar Belakang, Border & Pemotongan adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Menghias dengan Pengubah

Selain mengatur ukuran, pengubah juga dapat menghias Composable. Anda dapat memberi latar belakang, menggambar batas, dan membulatkan sudutnya. 🎨

Menambahkan Latar Belakang

background mengisi Composable dengan warna solid. Pengubah ini mewarnai seluruh area yang ditempati elemen, termasuk ukuran dan area pengisiannya.

Modifier.background(Color.Blue)

Menggunakan Warna Tema

Utamakan warna tema daripada nilai mentah. Mengambil warna dari MaterialTheme menjaga konsistensi aplikasi dalam mode terang maupun gelap.

Modifier.background(
  MaterialTheme.colorScheme.primary
)

Menggambar Batas

Gunakan border untuk membuat garis tepi Composable. Berikan ketebalan dalam dp dan warna, lalu Compose akan menggambar tepinya untuk Anda.

Modifier.border(2.dp, Color.Gray)

Mengenal Bentuk

Bentuk menjelaskan garis luar, seperti bentuk membulat atau lingkaran. Baik background maupun border menerima bentuk untuk mengubah siluetnya.

Sudut Membulat

RoundedCornerShape melembutkan sudut berdasarkan radius dalam dp. Bentuk ini sering digunakan untuk kartu, tombol, dan chip.

RoundedCornerShape(12.dp)

Latar Belakang Berbentuk

Teruskan bentuk ke background, maka warna hanya mengisi bagian di dalam garis luar tersebut dan menghasilkan panel membulat yang rapi.

Modifier.background(
  Color.LightGray,
  RoundedCornerShape(12.dp)
)

Memotong Konten

clip memangkas apa pun yang digambar di luar suatu bentuk. Gunakan pengubah ini agar gambar dan anak-anak mengikuti sudut membulat Anda.

Modifier.clip(RoundedCornerShape(12.dp))

Membuat Lingkaran

Gunakan CircleShape saat menginginkan lingkaran sempurna, seperti avatar bulat atau tombol mengambang.

Modifier.clip(CircleShape)

Memotong Sebelum Menggambar

Letakkan clip sebelum background agar isian juga membulat. Urutan dalam rangkaian menentukan bagian yang dipotong.

Modifier
  .clip(RoundedCornerShape(12.dp))
  .background(Color.Cyan)

Menggabungkannya untuk Kartu

Susun clip, background, dan border bersama-sama untuk membuat permukaan kartu yang rapi hanya dalam beberapa baris.

Modifier
  .clip(RoundedCornerShape(16.dp))
  .background(Color.White)
  .border(1.dp, Color.LightGray)

Pemeriksaan Singkat

Anda menginginkan latar belakang membulat yang isiannya juga membulat. Pengubah mana yang memastikannya?

Jawab di pelajaran interaktif

Ringkasan

Sekarang Anda dapat menata gaya elemen apa pun: background mewarnainya, border membuat garis tepinya, dan clip dengan Shape membulatkannya. 🎉

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

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Latar Belakang, Border & Pemotongan” gratis?

Ya — teks lengkap “Latar Belakang, Border & Pemotongan” 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 “Latar Belakang, Border & Pemotongan”?

Tambahkan warna, garis tepi, dan bentuk membulat. 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 2 dari 4.

Berapa lama pelajaran “Latar Belakang, Border & Pemotongan” 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

← Kembali ke Jetpack Compose Academy