Phân tích một giao diện trong Compose

Các giao diện trong Jetpack Compose do một số cấu trúc cấp thấp hơn và các API có liên quan tạo thành. Bạn có thể xem các giao diện này trong mã nguồn của MaterialTheme. Bạn cũng có thể áp dụng các giao diện này trong các hệ thống thiết kế tuỳ chỉnh.

Các lớp hệ thống giao diện

Một giao diện thường được tạo thành từ một số hệ thống con nhóm các phần hình ảnh và các khái niệm về hành vi. Những hệ thống này có thể được mô hình hoá bằng các lớp có giá trị giao diện.

Ví dụ: MaterialTheme bao gồm ColorScheme (hệ thống màu), Typography (hệ thống kiểu chữ ) và Shapes (hệ thống hình dạng).

@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
    /* ... */
)

/* ... */
ThemeAnatomySnippets.kt

Thành phần hệ thống giao diện cục bộ

Các lớp hệ thống giao diện hoàn toàn được cung cấp cho cây thành phần dưới dạng các phiên bản CompositionLocal. Việc cung cấp này cho phép các giá trị giao diện được tham chiếu tĩnh trong các hàm có thể kết hợp.

Để tìm hiểu thêm về CompositionLocal, hãy xem hướng dẫn về dữ liệu trong phạm vi cục bộ với 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 = ""
    )
}

/* ... */
ThemeAnatomySnippets.kt

Hàm giao diện

Hàm giao diện là điểm đầu vào và API chính. Hàm giao diện này xây dựng các phiên bản của hệ thống giao diện CompositionLocal — bằng các giá trị thực mà bất kỳ logic nào cũng phải có — cung cấp cho cây thành phần Compose có CompositionLocalProvider. Thông số content cho phép các thành phần kết hợp lồng nhau truy cập vào các giá trị giao diện liên quan đến hệ thống phân cấp.

@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
    )
}
ThemeAnatomySnippets.kt

Đối tượng giao diện

Quá trình truy cập vào các hệ thống giao diện được thực hiện bằng cách sử dụng một đối tượng có các thuộc tính tiện lợi. Để có sự nhất quán, đối tượng đó có xu hướng được đặt tên giống như hàm giao diện. Các thuộc tính chỉ đơn giản nhận thành phần Compose cục bộ hiện tại.

// 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
    /* ... */
}
ThemeAnatomySnippets.kt