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 /* ... */ }
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken gösterilir
- CompositionLocal ile yerel kapsamlı veriler
- Compose'da özel tasarım sistemleri
- Oluşturma'da Materyal Tasarım 2