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