โครงสร้างของธีมใน Compose

ธีมใน Jetpack Compose ประกอบด้วยโครงสร้างระดับล่างหลายรายการ และ API ที่เกี่ยวข้อง คุณดูค่าเหล่านี้ได้ในซอร์สโค้ดของ MaterialTheme และยังนำไปใช้ในระบบการออกแบบที่กำหนดเองได้ด้วย

คลาสระบบธีม

โดยปกติแล้ว ธีมจะประกอบด้วยระบบย่อยหลายระบบที่จัดกลุ่มแนวคิดด้านภาพและ ลักษณะการทำงานที่พบบ่อย ระบบเหล่านี้สามารถสร้างแบบจำลองด้วยคลาสที่มี ค่าการจัดธีม

เช่น MaterialTheme ประกอบด้วย ColorScheme (ระบบสี) Typography (ระบบการพิมพ์) และ Shapes (ระบบรูปร่าง)

@Immutable
data class ColorSystem(
    val color: Color,
    val gradient: List<Color>
    /* ... */
)

@Immutable
data class TypographySystem(
    val fontFamily: FontFamily,
    val textStyle: TextStyle
)
/* ... */

@Immutable
data class CustomSystem(
    val value1: Int,
    val value2: String
    /* ... */
)

/* ... */

องค์ประกอบของระบบธีมในพื้นที่

ระบบจะระบุคลาสของธีมให้กับโครงสร้างการจัดองค์ประกอบโดยนัยเป็นอินสแตนซ์ของ CompositionLocal ซึ่งช่วยให้สามารถอ้างอิงค่าการจัดธีมแบบคงที่ในฟังก์ชันที่ใช้ Compose ได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CompositionLocal ได้ที่ คู่มือข้อมูลที่กำหนดขอบเขตในเครื่องด้วย CompositionLocal

val LocalColorSystem = staticCompositionLocalOf {
    ColorSystem(
        color = Color.Unspecified,
        gradient = emptyList()
    )
}

val LocalTypographySystem = staticCompositionLocalOf {
    TypographySystem(
        fontFamily = FontFamily.Default,
        textStyle = TextStyle.Default
    )
}

val LocalCustomSystem = staticCompositionLocalOf {
    CustomSystem(
        value1 = 0,
        value2 = ""
    )
}

/* ... */

ฟังก์ชันธีม

ฟังก์ชันธีมเป็นจุดแรกเข้าและ API หลัก โดยจะสร้างอินสแตนซ์ ของระบบธีม CompositionLocals โดยใช้ค่าจริงและตรรกะ ที่จำเป็น ซึ่งจะส่งไปยังแผนผังการจัดองค์ประกอบด้วย CompositionLocalProvider พารามิเตอร์ content ช่วยให้ Composable ที่ซ้อนกันเข้าถึงค่าการจัดธีม ที่เกี่ยวข้องกับลําดับชั้นได้

@Composable
fun Theme(
    /* ... */
    content: @Composable () -> Unit
) {
    val colorSystem = ColorSystem(
        color = Color(0xFF3DDC84),
        gradient = listOf(Color.White, Color(0xFFD7EFFF))
    )
    val typographySystem = TypographySystem(
        fontFamily = FontFamily.Monospace,
        textStyle = TextStyle(fontSize = 18.sp)
    )
    val customSystem = CustomSystem(
        value1 = 1000,
        value2 = "Custom system"
    )
    /* ... */
    CompositionLocalProvider(
        LocalColorSystem provides colorSystem,
        LocalTypographySystem provides typographySystem,
        LocalCustomSystem provides customSystem,
        /* ... */
        content = content
    )
}

ออบเจ็กต์ธีม

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

// Use with eg. Theme.colorSystem.color
object Theme {
    val colorSystem: ColorSystem
        @Composable
        get() = LocalColorSystem.current
    val typographySystem: TypographySystem
        @Composable
        get() = LocalTypographySystem.current
    val customSystem: CustomSystem
        @Composable
        get() = LocalCustomSystem.current
    /* ... */
}