Gaya di Compose

Style API adalah paradigma baru untuk menyesuaikan atau "menata gaya" elemen dan komponen di Jetpack Compose, yang secara tradisional 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 memungkinkan pembuatan sistem desain kustom yang lebih mudah. Meskipun Anda tidak memerlukan komponen kustom, Styles API memiliki banyak manfaat untuk sistem desain Anda.

Perbedaan pentingnya adalah bahwa Gaya bukan 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 gaya berbasis status: API ini menyediakan cara yang lebih ringkas dan deklaratif untuk menentukan gaya yang berubah berdasarkan status yang berbeda (misalnya, saat kursor diarahkan, saat fokus, saat ditekan), sehingga secara signifikan mengurangi kode boilerplate dibandingkan dengan sistem pengubah.
  • Meningkatkan transisi status animasi: Style API memungkinkan animasi bawaan properti gaya di antara status dengan karakteristik performa yang ideal, sehingga menghindari rekomposisi yang terjadi dengan pendekatan animateColorAsState saat ini.
  • Menyederhanakan API komponen: Dengan memperkenalkan satu parameter Gaya untuk penyesuaian, API komponen disederhanakan secara signifikan dan menawarkan fleksibilitas yang lebih besar.
  • Lebih sedikit rekomposisi yang menghasilkan performa yang lebih baik pada pengubah: Gaya berjalan di fase Draw dan Layout Compose, sehingga tidak perlu melalui fase Komposisi.
  • Kumpulan API yang lebih standar: Kumpulan properti gaya standar membuat komponen apa pun dapat ditata gayanya.

Konsep inti

Konsep Deskripsi
Style Antarmuka yang menentukan tampilan elemen UI, dengan serangkaian properti yang dapat distel gayanya secara standar. Hal ini mirip dengan gaya CSS dan dapat disesuaikan secara lokal atau melalui tema. Gaya saling menggantikan; menetapkan properti dua kali (misalnya, background()) akan menghasilkan satu nilai akhir.
StyleScope Cakupan penerima untuk fungsi applyStyle() dalam Gaya. Objek ini 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.

Mulai: Tambahkan dependensi

Untuk menggunakan API di project Anda sendiri, pastikan Anda menggunakan rilis alfa terbaru dari fondasi Jetpack Compose. Di 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 Anda, tetapkan versi Compose ke 1.11.0-alpha06:

compose = "1.11.0-alpha06"

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" }