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

Style API เป็นกระบวนทัศน์ใหม่สำหรับการปรับแต่งหรือ "จัดรูปแบบ" องค์ประกอบและ คอมโพเนนต์ใน Jetpack Compose ซึ่งเดิมจะทำผ่าน ตัวแก้ไข โดยออกแบบมาเพื่อปลดล็อกการปรับแต่งที่ลึกซึ้งและง่ายดายยิ่งขึ้น

Styles API ช่วยเพิ่มความยืดหยุ่นในรูปแบบต่างๆ ปรับปรุงประสิทธิภาพ และช่วยให้สร้างระบบการออกแบบที่กำหนดเองได้ง่ายขึ้น แม้ว่าคุณจะไม่ ต้องการคอมโพเนนต์ที่กำหนดเอง แต่ Styles API ก็มีประโยชน์มากมายสำหรับระบบการออกแบบของคุณ

ข้อแตกต่างที่สำคัญคือสไตล์ไม่ได้ใช้แทนตัวแก้ไข แต่ใช้แทนพารามิเตอร์การจัดรูปแบบ เช่น ระยะเว้นขอบและสี เราขอแนะนำให้เปลี่ยนไปใช้สไตล์แทนพารามิเตอร์เพื่อเพิ่มความยืดหยุ่นและประสิทธิภาพ

ประโยชน์ของสไตล์

  • ลดความซับซ้อนของการจัดรูปแบบตามสถานะ: API มีวิธีที่กระชับและ ประกาศได้มากขึ้นในการกำหนดรูปแบบที่จะเปลี่ยนไปตามสถานะต่างๆ (เช่น วางเมาส์ โฟกัส กด) ซึ่งช่วยลดโค้ดบอยเลอร์เพลตได้อย่างมาก เมื่อเทียบกับระบบตัวแก้ไข
  • ปรับปรุงการเปลี่ยนสถานะภาพเคลื่อนไหว: Style API ช่วยให้สามารถใช้ภาพเคลื่อนไหวในตัวของพร็อพเพอร์ตี้สไตล์ระหว่างสถานะต่างๆ ได้โดยมีลักษณะประสิทธิภาพที่เหมาะสม ซึ่งจะหลีกเลี่ยงการจัดองค์ประกอบใหม่ที่เกิดขึ้นกับแนวทางanimateColorAsStateปัจจุบัน
  • เพิ่มความคล่องตัวให้ API ของคอมโพเนนต์: การเปิดตัวพารามิเตอร์ Style เดียวสำหรับการปรับแต่งช่วยลดความซับซ้อนของ API ของคอมโพเนนต์ได้อย่างมากและเพิ่มความยืดหยุ่นมากขึ้น
  • การจัดองค์ประกอบใหม่น้อยลงส่งผลให้ประสิทธิภาพดีขึ้นเมื่อเทียบกับตัวแก้ไข: สไตล์ จะทํางานในเฟสการวาดและการจัดเลย์เอาต์ของ Compose โดยข้ามเฟส การจัดองค์ประกอบ
  • ชุด API ที่เป็นมาตรฐานมากขึ้น: ชุดพร็อพเพอร์ตี้รูปแบบมาตรฐาน ทำให้คอมโพเนนต์ใดก็ได้ปรับแต่งสไตล์ได้

แนวคิดหลัก

แนวคิด คำอธิบาย
Style อินเทอร์เฟซที่กำหนดลักษณะขององค์ประกอบ UI โดยมีชุดพร็อพเพอร์ตี้ที่จัดรูปแบบได้มาตรฐาน ซึ่งคล้ายกับสไตล์ CSS และปรับแต่งได้ในเครื่องหรือผ่านธีม สไตล์จะเขียนทับกัน การตั้งค่าพร็อพเพอร์ตี้ 2 ครั้ง (เช่น background()) จะส่งผลให้มีค่าสุดท้ายค่าเดียว
StyleScope ขอบเขตของตัวรับสำหรับฟังก์ชัน applyStyle() ภายในสไตล์ โดยมีฟังก์ชันสำหรับกำหนดพร็อพเพอร์ตี้ภาพ (ระยะห่างจากขอบ พื้นหลัง เส้นขอบ ฯลฯ) และเข้าถึง StyleState ปัจจุบัน
StyleState ระบุสถานะ (เช่น isEnabled, isPressed, isChecked, สถานะที่กำหนดเอง) ที่คุณใช้ได้ภายในสไตล์เพื่อกำหนดรูปแบบตามเงื่อนไข

เริ่มต้นใช้งาน: เพิ่มการอ้างอิง

หากต้องการใช้ API ในโปรเจ็กต์ของคุณเอง โปรดตรวจสอบว่าคุณใช้ Jetpack Compose Foundation เวอร์ชันอัลฟ่าล่าสุด ในไฟล์ settings.gradle.kts ให้เพิ่ม ที่เก็บ Maven ของสแนปชอตลงในรายการที่เก็บที่จะใช้

ตั้งค่าเวอร์ชันของ Compose เป็น 1.11.0-alpha06 ใน libs.versions.toml หรือในไฟล์ app/build.gradle.kts โดยตรง

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