รูปแบบในฟีเจอร์เขียน

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" }
ถัดไป
พื้นฐานของสไตล์