स्टाइल की बुनियादी बातें

अपने पूरे ऐप्लिकेशन में स्टाइल लागू करने के तीन तरीके हैं:

1. इसका इस्तेमाल सीधे तौर पर उन मौजूदा कॉम्पोनेंट पर किया जा सकता है जो Style पैरामीटर दिखाते हैं.
2. उन लेआउट कंपोज़ेबल पर Modifier.styleable की मदद से स्टाइल लागू करें जो Style पैरामीटर स्वीकार नहीं करते.
3. अपने कस्टम डिज़ाइन सिस्टम में, Modifier.styleable{} का इस्तेमाल करें और अपने कॉम्पोनेंट पर स्टाइल पैरामीटर दिखाएं.

स्टाइल पर उपलब्ध प्रॉपर्टी

स्टाइल में, मॉडिफ़ायर की कई प्रॉपर्टी इस्तेमाल की जा सकती हैं. हालांकि, मॉडिफ़ायर की हर प्रॉपर्टी को स्टाइल में इस्तेमाल नहीं किया जा सकता. आपको अब भी कुछ व्यवहारों के लिए मॉडिफ़ायर की ज़रूरत होगी. जैसे, इंटरैक्शन, कस्टम ड्राइंग या प्रॉपर्टी को स्टैक करना.

ग्रुपिंग	प्रॉपर्टी	बच्चों को इनहेरिट किया गया
लेआउट और साइज़
पैडिंग	contentPadding (इनर) और externalPadding (आउटर) के तौर पर दिखाया गया है. यह दिशा के हिसाब से, हॉरिज़ॉन्टल, वर्टिकल, और सभी साइड के वैरिएंट में उपलब्ध है.	नहीं
डाइमेंशन	fillWidth/Height/Size() और width, height, और size (Dp, DpSize या Float फ़्रैक्शन के साथ काम करता है).	नहीं
स्टिकर दिखने की जगह	left/top/right/bottom ऑफ़सेट.	नहीं
विज़ुअल पहचान
पानी भरें	background और foreground (Color या Brush के साथ काम करता है).	नहीं
बॉर्डर	borderWidth, borderColor, और borderBrush.	नहीं
आकार	shape	नहीं - हालांकि, इसका इस्तेमाल अन्य प्रॉपर्टी के साथ किया जाता है. clip और border, इस तय किए गए आकार का इस्तेमाल करते हैं.
Shadows	dropShadow, innerShadow	नहीं
ट्रांसफ़ॉर्मेशन
ग्राफ़िक्स लेयर की जगह में बदलाव	translationX, translationY, scaleX/Y, rotationX/Y/Z	नहीं
कंट्रोल	alpha, zIndex (स्टैकिंग ऑर्डर), और transformOrigin (पिवट पॉइंट)	नहीं
टाइपोग्राफ़ी
स्टाइलिंग	textStyle, fontSize, fontWeight, fontStyle, और fontFamily	हां
इसका रंग	contentColor और contentBrush. इसका इस्तेमाल आइकॉन की स्टाइलिंग के लिए भी किया जाता है.	हां
पैराग्राफ़	lineHeight, letterSpacing, textAlign, textDirection, lineBreak, और hyphens.	हां
सजावट	textDecoration, textIndent, और baselineShift.	हां

स्टाइल पैरामीटर की मदद से, कॉम्पोनेंट पर सीधे तौर पर स्टाइल इस्तेमाल करना

Style पैरामीटर दिखाने वाले कॉम्पोनेंट की स्टाइल सेट की जा सकती है:

BaseButton(
    onClick = { },
    style = { }
) {
    BaseText("Click me")
}
StylesSnippets.kt

स्टाइल लैंबडा में, अलग-अलग प्रॉपर्टी सेट की जा सकती हैं. जैसे, externalPadding या background:

BaseButton(
    onClick = { },
    style = { background(Color.Blue) }
) {
    BaseText("Click me")
}
StylesSnippets.kt

इस्तेमाल की जा सकने वाली प्रॉपर्टी की पूरी सूची देखने के लिए, स्टाइल पर उपलब्ध प्रॉपर्टी देखें.

ऐसे कॉम्पोनेंट के लिए मॉडिफ़ायर का इस्तेमाल करके स्टाइल लागू करना जिनमें कोई मौजूदा पैरामीटर नहीं है

जिन कॉम्पोनेंट में पहले से मौजूद स्टाइल पैरामीटर नहीं होता है उनमें भी styleable मॉडिफ़ायर का इस्तेमाल करके स्टाइल लागू की जा सकती हैं. यह तरीका, अपने कस्टम कॉम्पोनेंट डेवलप करने के लिए भी काम आता है.

Row(
    modifier = Modifier.styleable { }
) {
    BaseText("Content")
}
StylesSnippets.kt

style पैरामीटर की तरह ही, lambda में background या padding जैसी प्रॉपर्टी शामिल की जा सकती हैं.

Row(
    modifier = Modifier.styleable {
        background(Color.Blue)
    }
) {
    BaseText("Content")
}
StylesSnippets.kt

ध्यान दें: Modifier.styleable का इस्तेमाल करते समय, चाइल्ड कंपोज़ेबल पर वे प्रॉपर्टी लागू नहीं होंगी. हालांकि, इनहेरिट की गई प्रॉपर्टी लागू होंगी. सिर्फ़ styleable मॉडिफ़ायर वाले कंटेनर पर ये प्रॉपर्टी लागू होती हैं.

चेन किए गए कई Modifier.styleable मॉडिफ़ायर, लागू किए गए कंपोज़ेबल पर इनहेरिट नहीं की गई प्रॉपर्टी के साथ जुड़ जाते हैं. ये उसी तरह काम करते हैं जैसे एक ही प्रॉपर्टी को तय करने वाले कई मॉडिफ़ायर. इनहेरिट की गई प्रॉपर्टी के लिए, ये वैल्यू बदल दी जाती हैं. साथ ही, चेन में मौजूद आखिरी styleable मॉडिफ़ायर, वैल्यू सेट करता है.

Modifier.styleable का इस्तेमाल करते समय, आपको StyleState भी बनाना और उपलब्ध कराना पड़ सकता है. इसका इस्तेमाल मॉडिफ़ायर के साथ किया जाता है, ताकि स्थिति के आधार पर स्टाइलिंग लागू की जा सके. ज़्यादा जानकारी के लिए, स्टाइल की मदद से स्टेट और ऐनिमेशन देखें.

स्टैंडअलोन स्टाइल तय करना

दोबारा इस्तेमाल करने के लिए, एक स्टैंडअलोन स्टाइल तय की जा सकती है:

val style = Style { background(Color.Blue) }
StylesSnippets.kt

इसके बाद, उस तय की गई स्टाइल को कंपोज़ेबल के स्टाइल पैरामीटर में या Modifier.styleable के साथ पास किया जा सकता है. Modifier.styleable का इस्तेमाल करते समय, आपको StyleState ऑब्जेक्ट भी बनाना होगा. StyleState के बारे में ज़्यादा जानकारी, स्टाइल के साथ स्टेट और ऐनिमेशन दस्तावेज़ में दी गई है.

यहां दिए गए उदाहरण में दिखाया गया है कि किसी स्टाइल को सीधे तौर पर कॉम्पोनेंट के बिल्ट-इन पैरामीटर या Modifier.styleable के ज़रिए कैसे लागू किया जा सकता है:

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}

// modifier styleable
val styleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(styleState, style)
) {
    BaseText("Column content")
}
StylesSnippets.kt

उस स्टाइल को कई कॉम्पोनेंट में भी पास किया जा सकता है:

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}
BaseText("Different text that uses the same style parameter", style = style)

// modifier styleable
val columnStyleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(columnStyleState, style)
) {
    BaseText("Column")
}
val rowStyleState = remember { MutableStyleState(null) }
Row(
    Modifier.styleable(rowStyleState, style)
) {
    BaseText("Row")
}
StylesSnippets.kt

एक से ज़्यादा स्टाइल प्रॉपर्टी जोड़ना

हर लाइन पर अलग-अलग प्रॉपर्टी सेट करके, एक से ज़्यादा स्टाइल प्रॉपर्टी जोड़ी जा सकती हैं:

BaseButton(
    onClick = { },
    style = {
        background(Color.Blue)
        contentPaddingStart(16.dp)
    }
) {
    BaseText("Button")
}
StylesSnippets.kt

अहम जानकारी: स्टाइल में, मॉडिफ़ायर के आधार पर स्टाइल तय करने के बजाय, प्रॉपर्टी एक-दूसरे को बदल देती हैं. इसलिए, सबसे आखिर में तय की गई प्रॉपर्टी को प्राथमिकता मिलती है.

स्टाइल में मौजूद प्रॉपर्टी, मॉडिफ़ायर पर आधारित स्टाइलिंग की तरह नहीं होती हैं. स्टाइल, एक स्टाइल ब्लॉक में मौजूद प्रॉपर्टी की सूची में सेट की गई आखिरी वैल्यू को अपनाती हैं. यहां दिए गए उदाहरण में, बैकग्राउंड को दो बार सेट किया गया है. इसलिए, TealColor में सेट किया गया बैकग्राउंड इस्तेमाल किया गया है. पैडिंग के लिए, contentPaddingTop, contentPadding की ओर से सेट की गई टॉप पैडिंग को बदल देता है और वैल्यू को एक साथ नहीं जोड़ता है.

BaseButton(
    style = {
        background(Color.Red)
        // Background of Red is now overridden with TealColor instead
        background(TealColor)
        // All directions of padding are set to 64.dp (top, start, end, bottom)
        contentPadding(64.dp)
        // Top padding is now set to 16.dp, all other paddings remain at 64.dp
        contentPaddingTop(16.dp)
    },
    onClick = {
        //
    }
) {
    BaseText("Click me!")
}
StylesSnippets.kt

पहली इमेज. दो बैकग्राउंड कलर सेट किए गए बटन और दो contentPadding ओवरराइड.

एक जैसे कई स्टाइल ऑब्जेक्ट मर्ज करना

एक से ज़्यादा स्टाइल ऑब्जेक्ट बनाए जा सकते हैं और उन्हें अपने कंपोज़ेबल के स्टाइल पैरामीटर में पास किया जा सकता है.

val style1 = Style { background(TealColor) }
val style2 = Style { contentPaddingTop(16.dp) }

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}
StylesSnippets.kt

दूसरी इमेज. बैकग्राउंड के रंग और contentPaddingTop सेट वाला बटन.

जब कई स्टाइल में एक ही प्रॉपर्टी तय की जाती है, तो आखिरी बार सेट की गई प्रॉपर्टी को चुना जाता है. स्टाइल में प्रॉपर्टी को जोड़ा नहीं जाता है. इसलिए, बाद में पास किया गया पैडिंग, शुरुआती contentPaddingHorizontal से सेट किए गए contentPadding को बदल देता है. इसके अलावा, आखिरी बैकग्राउंड कलर, पास की गई शुरुआती स्टाइल से सेट किए गए बैकग्राउंड कलर को बदल देता है.

val style1 = Style {
    background(Color.Red)
    contentPadding(32.dp)
}

val style2 = Style {
    contentPaddingHorizontal(8.dp)
    background(Color.LightGray)
}

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}
StylesSnippets.kt

इस मामले में, लागू की गई स्टाइल में हल्के स्लेटी रंग का बैकग्राउंड और 32.dp पैडिंग है. हालांकि, बाईं और दाईं ओर की पैडिंग की वैल्यू 8.dp है.

तीसरी इमेज. contentPadding वाला बटन, जिसे अलग-अलग स्टाइल से बदला गया है.

स्टाइल इनहेरिटेंस

स्टाइल से जुड़ी कुछ प्रॉपर्टी, जैसे कि contentColor और टेक्स्ट स्टाइल से जुड़ी प्रॉपर्टी, चाइल्ड कंपोज़ेबल में फैलती हैं. चाइल्ड कंपोज़ेबल पर सेट की गई स्टाइल, उस चाइल्ड के लिए इनहेरिट की गई पैरंट स्टाइलिंग को बदल देती है.

चौथी इमेज. Style, styleable, और डायरेक्ट पैरामीटर की मदद से स्टाइल ट्रांसफ़र की सुविधा.

प्राथमिकता	Method	प्रभाव
1 (सबसे ज़्यादा)	कंपोज़ेबल पर सीधे तौर पर दिए गए आर्ग्युमेंट	यह सभी को बदल देता है. उदाहरण के लिए, Text(color = Color.Red)
2	स्टाइल पैरामीटर	स्थानीय स्टाइल में बदलाव Text(style = Style { contentColor(Color.Red)}
3	मॉडिफ़ायर चेन	Modifier.styleable{ contentColor(Color.Red) पर क्लिक करें.
4 (सबसे कम)	पैरंट स्टाइल	ऐसी प्रॉपर्टी के लिए जिन्हें पैरंट से इनहेरिट किया जा सकता है (टाइपोग्राफ़ी/रंग).

ध्यान दें: एक से ज़्यादा चेन किए गए Modifier.styleable मॉडिफ़ायर, लागू किए गए कंपोज़ेबल पर इनहेरिट न की गई प्रॉपर्टी के साथ जुड़ जाते हैं. यह ठीक वैसा ही है जैसे एक ही प्रॉपर्टी को तय करने वाले एक से ज़्यादा मॉडिफ़ायर का इस्तेमाल करना. इनहेरिट की गई प्रॉपर्टी के लिए, इन्हें बदल दिया जाता है. चेन में मौजूद आखिरी styleable मॉडिफ़ायर, वैल्यू सेट करता है.

पैरंट स्टाइलिंग

पैरंट कंपोज़ेबल से टेक्स्ट प्रॉपर्टी (जैसे कि contentColor) सेट की जा सकती हैं. ये सभी चाइल्ड Text कंपोज़ेबल पर लागू होती हैं.

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children inherit", style = { width(60.dp) })
    BaseText("certain properties")
    BaseText("from their parents")
}
StylesSnippets.kt

पांचवीं इमेज. चाइल्ड कंपोज़ेबल की प्रॉपर्टी इनहेरिटेंस.

प्रॉपर्टी की वैल्यू को चाइल्ड प्रॉपर्टी के लिए बदलना

किसी खास Text कंपोज़ेबल पर भी स्टाइलिंग सेट की जा सकती है. अगर पैरंट कंपोज़ेबल में स्टाइलिंग सेट की गई है, तो चाइल्ड कंपोज़ेबल में सेट की गई स्टाइलिंग, पैरंट कंपोज़ेबल की स्टाइलिंग को बदल देती है.

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children can ", style = {
        contentBrush(Brush.linearGradient(listOf(Color.Red, Color.Blue)))
    })
    BaseText("override properties")
    BaseText("set by their parents")
}
StylesSnippets.kt

छठी इमेज. चाइल्ड कंपोज़ेबल, पैरंट प्रॉपर्टी को ओवरराइड करते हैं.

कस्टम स्टाइल प्रॉपर्टी लागू करना

StyleScope पर एक्सटेंशन फ़ंक्शन का इस्तेमाल करके, ऐसी कस्टम प्रॉपर्टी बनाई जा सकती हैं जो स्टाइल की मौजूदा परिभाषाओं से मैप होती हैं. उदाहरण के लिए:

fun StyleScope.outlinedBackground(color: Color) {
    border(1.dp, color)
    background(color)
}
StylesSnippets.kt

स्टाइल की परिभाषा में इस नई प्रॉपर्टी को लागू करें:

val customExtensionStyle = Style {
    outlinedBackground(Color.Blue)
}
StylesSnippets.kt

स्टाइल की जा सकने वाली नई प्रॉपर्टी बनाने की सुविधा उपलब्ध नहीं है. अगर आपको अपने इस्तेमाल के उदाहरण के लिए इस तरह की सहायता चाहिए, तो सुविधा के लिए अनुरोध सबमिट करें.

CompositionLocal की वैल्यू पढ़ना

डिजाइन सिस्टम टोकन को CompositionLocal में सेव करना एक सामान्य पैटर्न है, ताकि पैरामीटर के तौर पर पास किए बिना ही वैरिएबल को ऐक्सेस किया जा सके. स्टाइल, CompositionLocal को ऐक्सेस कर सकती हैं, ताकि स्टाइल में पूरे सिस्टम के लिए वैल्यू वापस पाई जा सकें:

val buttonStyle = Style {
    contentPadding(12.dp)
    shape(RoundedCornerShape(50))
    background(Brush.verticalGradient(LocalCustomColors.currentValue.background))
}
StylesSnippets.kt