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

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

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

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

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

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

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, contentPadding या externalPadding जैसी प्रॉपर्टी शामिल की जा सकती हैं.

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

चेन किए गए कई 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

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

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

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

BaseButton(
    style = style1 then style2,
    onClick = {

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

जब कई स्टाइल में एक ही प्रॉपर्टी के बारे में बताया जाता है, तो आखिरी बार सेट की गई प्रॉपर्टी को चुना जाता है. स्टाइल में प्रॉपर्टी को जोड़ा नहीं जाता है. इसलिए, बाद में पास किया गया पैडिंग, शुरुआती 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 है.

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

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

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

पैरंट कंपोज़ेबल से टेक्स्ट प्रॉपर्टी (जैसे कि 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