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ı
Temalar genellikle ortak görsel ve davranışsal kavramları gruplandıran bir dizi alt sistemden oluşur. Bu sistemler, tema değerlerine sahip sınıflarla modellenebilir.
Örneğin, MaterialTheme
şunları içerir:
ColorScheme
(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 bileşimi yerel öğeleri
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 = "" ) } /* ... */
Tema işlevi
Tema işlevi, giriş noktası ve birincil API'dir. Gerekli mantığı ve gerçek değerleri kullanarak tema sistemi CompositionLocal
s örneklerini oluşturur ve bunları CompositionLocalProvider
ile kompozisyon ağacına sağlar.
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 ) }
Tema nesnesi
Tema sistemlerine erişim, kolaylık özelliklerine sahip bir nesne kullanılarak yapılır. Örneğin, nesne, tema işleviyle aynı şekilde adlandırılır. Mülkler, 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 /* ... */ }
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- CompositionLocal ile yerel kapsamlı veriler
- Compose'da özel tasarım sistemleri
- E-posta Yazma'da Materyal Tasarım 3