Compose'da bir temanın anatomisi

Jetpack Compose'daki temalar, daha düşük düzeyde bir dizi yapı ve ilgili API'lerden oluşur. Bunlar MaterialTheme'nın kaynak kodunda görülebilir ve özel tasarım sistemlerinde de uygulanabilir.

Tema sistemi sınıfları

Tema genellikle ortak görsel ve davranışsal kavramları gruplandıran bir dizi alt sistemden oluşur. Bu sistemler, temalandırma değerlerine sahip sınıflarla modellenebilir.

Örneğin, MaterialTheme şunları içerir: ColorScheme (renk sistemi), Typography (tipografi sistemi) ve Shapes (şekil sistemi).

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

/* ... */

Tema sistemi kompozisyon yerelleri

Tema sistemi sınıfları, kompozisyon ağacına CompositionLocal örnekleri olarak örtülü şekilde sağlanır. Bu, tema değerlerinin composable işlevlerde statik olarak referans verilmesine olanak tanır.

CompositionLocal hakkında daha fazla bilgi edinmek için CompositionLocal ile yerel kapsamlı veriler rehberine göz atın.

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

/* ... */

Tema işlevi

Tema işlevi, giriş noktası ve birincil API'dir. CompositionLocals tema sisteminin örneklerini oluşturur. Gerçek değerler ve gerekli tüm mantık kullanılarak CompositionLocalProvider ile kompozisyon ağacına sağlanır. content parametresi, iç içe yerleştirilmiş composable'ların temalandırma değerlerine hiyerarşiye göre erişmesine olanak tanır.

@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
    )
}

Tema nesnesi

Tema sistemlerine erişim, kolaylık sağlayan özelliklere sahip bir nesne kullanılarak yapılır. Tutarlılık için nesne, tema işleviyle aynı şekilde adlandırılır. Özellikler, mevcut kompozisyonu yerel olarak alır.

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