Compose'da bir temanın anatomisi

Jetpack Compose'daki temalar, bir dizi alt düzey yapıdan ve ilgili API'lerden oluşur. Bunlar, MaterialTheme öğesinin kaynak kodunda görülebilir ve özel tasarım sistemlerine de uygulanabilir.

Tema sistemi sınıfları

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

Örneğin, MaterialTheme şunları içerir: Colors (renk sistemi), Typography (yazım 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 kompozisyonu yerelleri

Tema sistemi sınıfları, beste ağacına CompositionLocal örnek olarak dolaylı olarak sağlanır. Bu, derlenebilir işlevlerde tema oluşturma değerlerine statik olarak referans verilmesini sağlar.

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. Bu tema, CompositionLocalProvider ile beste ağacına sağlanan tema sistemi CompositionLocal örneklerini oluşturur. Oluşturulan örneklerde her türlü mantık için gereken gerçek değerler kullanılır. content parametresi, iç içe yerleştirilmiş composable öğelerinin hiyerarşiye göre tema değerlerine 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 özellikleri olan bir nesne aracılığıyla gerçekleştirilir. Tutarlılık açısından, nesne tema işleviyle aynı şekilde adlandırılma eğilimindedir. Özellikler, mevcut besteyi 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
    /* ... */
}