Compose'da bir temanın anatomisi

Jetpack Compose'daki temalar birkaç alt düzey yapıdan oluşur ve ilgili API'leri kullanabilirsiniz. Bunlar, kaynak kod MaterialTheme ve özel tasarım sistemlerinde de uygulanabilir.

Tema sistemi sınıfları

Tema, genellikle görsel öğeler ile görsellerin bir arada kullanıldığı bir dizi sistemden üzerine konuşacağız. Bu sistemler, sahip olduğu sınıfa sahip sınıflarla temaya göre değerlendirmelisiniz.

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

/* ... */
ThemeAnatomySnippets.kt

Tema sistemi bileşimi yerelleri

Tema sistemi sınıfları, örtülü olarak kompozisyon ağacına CompositionLocal sağlar. Bu, tema oluşturma değerlerine composable'da statik olarak referans verilmesine olanak tanır. işlevlerine dahildir.

CompositionLocal hakkında daha fazla bilgi edinmek için şu sayfaya göz atın: CompositionLocal rehberi ile yerel kapsamlı veriler.

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

Tema işlevi

Tema işlevi, giriş noktası ve birincil API'dir. Örnekler oluşturur (herhangi bir mantık gerçek değerler kullanılarak) için CompositionLocal tema sistemi gerekli (kolayca) CompositionLocalProvider content parametresi, iç içe yerleştirilmiş composable'ların tema değerlerine erişmesine olanak tanır göreceli olabilir.

@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

Tema nesnesi

Tema sistemlerine erişim, kolaylık özelliklerine sahip bir nesne aracılığıyla yapılır. Örneğin, nesne, tema işleviyle aynı şekilde adlandırılır. İlgili içeriği oluşturmak için kullanılan özellikleri yerel olarak geçerli bileşimi 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
    /* ... */
}
ThemeAnatomySnippets.kt

ziyaret edin.