Style API เป็นกระบวนทัศน์ใหม่สำหรับการปรับแต่งหรือ "จัดรูปแบบ" องค์ประกอบและคอมโพเนนต์ใน Jetpack Compose ซึ่งโดยทั่วไปจะทำผ่านตัวปรับแต่ง โดยออกแบบมาเพื่อปลดล็อกการปรับแต่งที่ง่ายขึ้นและลึกซึ้งยิ่งขึ้น
Styles API ช่วยเพิ่มความยืดหยุ่นในฟอร์มแฟกเตอร์ต่างๆ ให้ประสิทธิภาพที่ดีขึ้น และช่วยให้สร้างระบบการออกแบบที่กำหนดเองได้ง่ายขึ้น แม้ว่าคุณจะไม่ต้องการคอมโพเนนต์ที่กำหนดเอง แต่ Styles API ก็มีประโยชน์มากมายสำหรับระบบการออกแบบของคุณ
ความแตกต่างที่สำคัญคือสไตล์ไม่ได้มาแทนที่ตัวปรับแต่ง แต่จะทำหน้าที่แทนพารามิเตอร์การจัดรูปแบบ เช่น ระยะห่างภายในและสี เราขอแนะนำให้เปลี่ยนไปใช้สไตล์แทนพารามิเตอร์เพื่อเพิ่มความยืดหยุ่นและประสิทธิภาพ
ประโยชน์ของสไตล์
- ลดความซับซ้อนของการจัดรูปแบบตามสถานะ: API มีวิธีที่กระชับและประกาศได้มากขึ้นในการกำหนดสไตล์ที่จะเปลี่ยนแปลงตามสถานะต่างๆ (เช่น วางเมาส์เหนือ โฟกัส กด) ซึ่งช่วยลดโค้ด Boilerplate ได้อย่างมากเมื่อเทียบกับระบบตัวปรับแต่ง
- ปรับปรุงการเปลี่ยนสถานะแบบเคลื่อนไหว: Style API ช่วยให้สามารถสร้างภาพเคลื่อนไหวในตัวของพร็อพเพอร์ตี้สไตล์ระหว่างสถานะต่างๆ ด้วยลักษณะประสิทธิภาพที่เหมาะสม โดยหลีกเลี่ยงการคอมโพสใหม่ที่เกิดขึ้นกับแนวทาง
animateColorAsStateปัจจุบัน - ปรับปรุง API ของคอมโพเนนต์: การนำพารามิเตอร์สไตล์เดียวมาใช้สำหรับการปรับแต่งช่วยลดความซับซ้อนของ API ของคอมโพเนนต์ได้อย่างมากและเพิ่มความยืดหยุ่น
- การคอมโพสใหม่น้อยลงส่งผลให้ประสิทธิภาพดีขึ้นเมื่อเทียบกับตัวปรับแต่ง: สไตล์จะทำงานในระยะการวาดและการจัดเลย์เอาต์ของ Compose โดยข้ามระยะการคอมโพส
- ชุด API ที่ได้มาตรฐานมากขึ้น: ชุดพร็อพเพอร์ตี้การจัดรูปแบบมาตรฐานทำให้คอมโพเนนต์ใดๆ ก็จัดรูปแบบได้
แนวคิดหลัก
| แนวคิด | คำอธิบาย |
|---|---|
Style |
อินเทอร์เฟซที่กำหนดลักษณะที่ปรากฏขององค์ประกอบ UI โดยมีชุดพร็อพเพอร์ตี้ที่จัดรูปแบบได้มาตรฐาน ซึ่งคล้ายกับสไตล์ CSS และปรับแต่งได้ในเครื่องหรือผ่านธีม สไตล์จะเขียนทับกัน การตั้งค่าพร็อพเพอร์ตี้ 2 ครั้ง (เช่น background()) จะส่งผลให้มีค่าเดียวเป็นค่าสุดท้าย |
StyleScope |
ขอบเขตผู้รับสำหรับฟังก์ชัน applyStyle() ภายในสไตล์ โดยมีฟังก์ชันสำหรับกำหนดพร็อพเพอร์ตี้ภาพ (ระยะห่างภายใน พื้นหลัง เส้นขอบ ฯลฯ) และเข้าถึง StyleState ปัจจุบัน |
StyleState |
ระบุสถานะ (เช่น isEnabled, isPressed, isChecked, สถานะที่กำหนดเอง) ที่คุณใช้ภายในสไตล์เพื่อกำหนดการจัดรูปแบบแบบมีเงื่อนไขได้ |
เริ่มต้นใช้งาน: เพิ่มการพึ่งพิง
หากต้องการใช้ API ในโปรเจ็กต์ของคุณเอง โปรดตรวจสอบว่าคุณใช้ Jetpack Compose Foundation เวอร์ชันอัลฟ่าล่าสุด ในไฟล์ settings.gradle.kts ให้เพิ่มที่เก็บ Maven ของ Snapshot ลงในรายการที่เก็บที่จะใช้
ตั้งค่าเวอร์ชันของ Compose เป็น 1.12.0-alpha03 ในไฟล์ libs.versions.toml หรือในไฟล์ app/build.gradle.kts โดยตรง
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" }