Gaya di Compose

Style API adalah paradigma baru untuk menyesuaikan atau "menata gaya" elemen dan komponen di Jetpack Compose, yang biasanya dilakukan melalui pengubah. Fitur ini dirancang untuk memungkinkan penyesuaian yang lebih mendalam dan mudah.

Styles API meningkatkan fleksibilitas di berbagai faktor bentuk, memberikan performa yang lebih baik, dan memudahkan pembuatan sistem desain kustom. Meskipun Anda tidak memerlukan komponen kustom, Styles API memiliki banyak manfaat untuk sistem desain Anda.

Perbedaan pentingnya adalah Gaya bukanlah pengganti pengubah, tetapi berfungsi sebagai pengganti parameter gaya, seperti padding dan warna. Sebaiknya beralihlah ke penggunaan Gaya daripada parameter untuk meningkatkan fleksibilitas dan performa.

Manfaat Gaya

  • Menyederhanakan penataan gaya berbasis status: API ini menyediakan cara yang lebih ringkas dan deklaratif untuk menentukan gaya yang berubah berdasarkan berbagai status (misalnya, diarahkan, difokuskan, ditekan), sehingga mengurangi kode boilerplate secara signifikan dibandingkan dengan sistem pengubah.
  • Meningkatkan transisi status animasi: Style API memungkinkan animasi bawaan properti gaya antar-status dengan karakteristik performa yang ideal, sehingga menghindari rekomposisi yang terjadi dengan pendekatan animateColorAsState saat ini.
  • Menyederhanakan API komponen: Dengan memperkenalkan satu parameter Style untuk penyesuaian, API komponen menjadi jauh lebih sederhana dan menawarkan fleksibilitas yang lebih besar.
  • Lebih sedikit rekomposisi yang menghasilkan performa lebih baik dibandingkan pengubah: Gaya berjalan dalam fase Gambar dan Tata Letak Compose, melewati fase Komposisi.
  • Set API yang lebih standar: Set standar properti gaya membuat komponen apa pun dapat diberi gaya.

Konsep inti

Konsep Deskripsi
Style Antarmuka yang menentukan tampilan elemen UI, dengan set standar properti yang dapat diberi gaya. Gaya ini mirip dengan gaya CSS dan dapat disesuaikan secara lokal atau melalui tema. Gaya saling menimpa; menetapkan properti dua kali (misalnya, background()) akan menghasilkan satu nilai akhir.
StyleScope Cakupan penerima untuk fungsi applyStyle() dalam Style. Modifier menyediakan fungsi untuk menentukan properti visual (padding, latar belakang, batas, dll.) dan mengakses StyleState saat ini.
StyleState Menyediakan status (misalnya, isEnabled, isPressed, isChecked, status kustom) yang dapat Anda gunakan dalam Gaya untuk menentukan gaya bersyarat.

Memulai: Menambahkan dependensi

Untuk menggunakan API dalam project Anda sendiri, pastikan Anda menggunakan rilis alfa terbaru dari fondasi Jetpack Compose. Dalam file settings.gradle.kts, tambahkan repositori Maven snapshot ke daftar repositori yang akan digunakan.

Di libs.versions.toml atau langsung di file app/build.gradle.kts, tetapkan versi Compose ke 1.12.0-alpha03:

compose = "1.12.0-alpha03"

androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }
Berikutnya
Dasar-Dasar Gaya