Jetpack Compose में थीम, लोअर-लेवल के कई कंस्ट्रक्ट और उनसे जुड़े एपीआई से बनी होती हैं. इन्हें
सोर्स कोड
में देखा जा सकता है. साथ ही, इन्हें कस्टम डिज़ाइन सिस्टम में भी लागू किया जा सकता है.MaterialTheme
थीम सिस्टम की क्लास
आम तौर पर, थीम कई सबसिस्टम से बनी होती है. ये सबसिस्टम, एक जैसे विज़ुअल और बिहेवियरल कॉन्सेप्ट को ग्रुप करते हैं. इन सिस्टम को क्लास के साथ मॉडल किया जा सकता है. इनमें थीमिंग की वैल्यू होती हैं.
उदाहरण के लिए, MaterialTheme में
ColorScheme
(कलर सिस्टम),
Typography
(टाइपोग्राफ़ी सिस्टम), और
Shapes
(शेप सिस्टम) शामिल हैं.
@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 /* ... */ ) /* ... */
थीम सिस्टम कंपोज़िशन लोकल
थीम सिस्टम की क्लास, कंपोज़िशन ट्री को
CompositionLocal
इंस्टेंस के तौर पर, साफ़ तौर पर उपलब्ध कराई जाती हैं. इससे कंपोज़ेबल फ़ंक्शन में, थीमिंग की वैल्यू को स्टैटिक तौर पर रेफ़र किया जा सकता है.
CompositionLocal के बारे में ज़्यादा जानने के लिए, CompositionLocal की मदद से स्थानीय तौर पर स्कोप किया गया डेटा गाइड देखें.
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 = "" ) } /* ... */
थीम फ़ंक्शन
थीम फ़ंक्शन, एंट्री पॉइंट और प्राइमरी एपीआई होता है. यह थीम सिस्टम के CompositionLocal के इंस्टेंस बनाता है. इसके लिए, असली वैल्यू और ज़रूरी लॉजिक का इस्तेमाल किया जाता है. इन्हें CompositionLocalProvider की मदद से, कंपोज़िशन ट्री को उपलब्ध कराया जाता है.
content पैरामीटर की मदद से, नेस्ट किए गए कंपोज़ेबल, क्रम के हिसाब से थीमिंग की वैल्यू ऐक्सेस कर सकते हैं.
@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 ) }
थीम ऑब्जेक्ट
थीम सिस्टम को ऐक्सेस करने के लिए, आसान प्रॉपर्टी वाले ऑब्जेक्ट का इस्तेमाल किया जाता है. एक जैसी थीम के लिए, ऑब्जेक्ट का नाम आम तौर पर थीम फ़ंक्शन के नाम जैसा ही होता है. प्रॉपर्टी से, मौजूदा कंपोज़िशन लोकल मिलता है.
// 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 /* ... */ }
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर, लिंक का टेक्स्ट दिखता है
- CompositionLocal की मदद से स्थानीय तौर पर स्कोप किया गया डेटा
- Compose में कस्टम डिज़ाइन सिस्टम
- Compose में मटीरियल डिज़ाइन 3