สิ่งที่ควรและไม่ควรทำกับสไตล์

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

สิ่งที่ควรทำ

ทำตามแนวทางปฏิบัติแนะนำต่อไปนี้

สิ่งที่ควรทำ: ใช้สไตล์สำหรับภาพและตัวแก้ไขสำหรับลักษณะการทำงาน

ใช้ Styles API สำหรับการกำหนดค่าภาพ (พื้นหลัง ระยะห่างจากขอบ เส้นขอบ) และ ตัวแก้ไขที่สงวนไว้สำหรับลักษณะการทำงาน เช่น ตรรกะการคลิก การตรวจหาท่าทางสัมผัส หรือ การช่วยเหลือพิเศษ

สิ่งที่ควรทำ: แสดงพารามิเตอร์สไตล์ในระบบการออกแบบ

สำหรับคอมโพเนนต์ระบบการออกแบบที่กำหนดเอง คุณควรแสดงออบเจ็กต์ Style หลังจากพารามิเตอร์ตัวแก้ไข

@Composable
fun GradientButton(
    modifier: Modifier = Modifier,
    // ✅ DO: for design system components, expose a style modifier to consumers to be able to customize the components
    style: Style = Style
) {
    // Consume the style
}
DosDonts.kt

สิ่งที่ควรทำ: แทนที่พารามิเตอร์ที่อิงตามภาพด้วยสไตล์

ลองแทนที่พารามิเตอร์ใน Composable ด้วยพารามิเตอร์ Style เดียว เช่น

// Before
@Composable
fun OldButton(background: Color, fontColor: Color) {
}

// After
// ✅ DO: Replace visual-based parameters with a style that includes same properties
@Composable
fun NewButton(style: Style = Style) {
}
DosDonts.kt

สิ่งที่ควรทำ: จัดลำดับความสำคัญของสไตล์สำหรับภาพเคลื่อนไหว

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

สิ่งที่ควรทำ: ใช้ประโยชน์จาก "การเขียนครั้งสุดท้ายชนะ"

ใช้ประโยชน์จากข้อเท็จจริงที่ว่าพร็อพเพอร์ตี้ style จะเขียนทับแทนที่จะซ้อนกัน ใช้เพื่อลบล้างเส้นขอบหรือพื้นหลังของคอมโพเนนต์เริ่มต้นโดยไม่ ต้องใช้พารามิเตอร์หลายรายการ

สิ่งที่ไม่ควรทำ

เราไม่แนะนำให้ใช้รูปแบบต่อไปนี้

อย่า: ใช้สไตล์สำหรับตรรกะการโต้ตอบ

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

ไม่ควร: ระบุรูปแบบเริ่มต้นเป็นพารามิเตอร์เริ่มต้น

ควรประกาศพารามิเตอร์รูปแบบโดยใช้ style: Style = Style เสมอ

@Composable
fun BadButton(
    modifier: Modifier = Modifier,
    // ❌ DON'T set a default style here as a parameter
    style: Style = Style { background(Color.Red) }
) {
}
DosDonts.kt

หากต้องการรวมพารามิเตอร์ "default" ให้ผสานรูปแบบพารามิเตอร์ขาเข้ากับค่าเริ่มต้นที่กำหนดไว้

@Composable
fun GoodButton(
    modifier: Modifier = Modifier,
    // ✅ Do: always pass it as a Style, do not pass other defaults
    style: Style = Style
) {
    // ...
    val defaultStyle = Style { background(Color.Red) }
    // ✅ Do Combine defaults inside with incoming parameter
    Box(modifier = modifier.styleable(styleState, defaultStyle, style)) {
      // your logic
    }
}
DosDonts.kt

อย่า: ระบุพารามิเตอร์รูปแบบให้กับ Composable ที่อิงตามเลย์เอาต์

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