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

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

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

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

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

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

ग्रुपिंग	प्रॉपर्टी	बच्चों को इनहेरिट किया गया
लेआउट और साइज़
कॉन्टेंट पैडिंग (अंदरूनी)	- `contentPadding(all: Dp)` - `contentPadding(horizontal: Dp, vertical: Dp)` - `contentPadding(start: Dp, top: Dp, end: Dp, bottom: Dp)` - `contentPaddingHorizontal(value: Dp)` / `contentPaddingVertical(value: Dp)` - `contentPaddingStart(value: Dp)` / `contentPaddingTop(value: Dp)` / `contentPaddingEnd(value: Dp)` / `contentPaddingBottom(value: Dp)`	नहीं
बाहरी पैडिंग (आउटर)	- `externalPadding(all: Dp)` - `externalPadding(horizontal: Dp, vertical: Dp)` - `externalPadding(start: Dp, top: Dp, end: Dp, bottom: Dp)` - `externalPaddingHorizontal(value: Dp)` / `externalPaddingVertical(value: Dp)` - `externalPaddingStart(value: Dp)` / `externalPaddingTop(value: Dp)` / `externalPaddingEnd(value: Dp)` / `externalPaddingBottom(value: Dp)`	नहीं
डाइमेंशन	`fillWidth()/fillHeight()/fillSize()` और `width`, `height`, और `size` (`Dp`, `DpSize` या `Float` फ़्रैक्शन के साथ काम करता है).	नहीं
स्टिकर दिखने की जगह	`left/top/right/bottom` ऑफ़सेट.	नहीं
विज़ुअल पहचान
पानी भरें	`background` और `foreground` (`Color` या `Brush` के साथ काम करता है).	नहीं
बॉर्डर	`borderWidth`, `borderColor`, और `borderBrush`.	नहीं
आकार	`shape`	नहीं - हालांकि, इसका इस्तेमाल अन्य प्रॉपर्टी के साथ किया जाता है. `clip` और `border`, इस तय किए गए आकार का इस्तेमाल करते हैं.
परछाई	`dropShadow`, `innerShadow`	नहीं
ट्रांसफ़ॉर्मेशन
ग्राफ़िक्स लेयर की जगह में बदलाव	`translationX`, `translationY`, `scaleX/scaleY`, `rotationX/rotationY/rotationZ`	नहीं
कंट्रोल	`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")
}StylesS
nippets.kt

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

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

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

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

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

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

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

Row(
    modifier = Modifier.styleable {
        background(Color.Blue)
    }
) {
    BaseText("Content")
}StylesS
nippets.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)
) {
    Base
Text("Row")
}StylesSnippets.kt

स्टाइल की कई प्रॉपर्टी जोड़ना

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

BaseButton(
    onClick = { },
    style = {
        background(Color.Blue)
        contentPaddingStart(16.dp)
    }
) {
    BaseText("Button")
}StylesS
nippets.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!")
}StylesS
nippets.kt

एक से ज़्यादा स्टाइल ऑब्जेक्ट मर्ज करना

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

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

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}StylesS
nippets.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!")
}StylesS
nippets.kt

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

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

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

स्टाइल, स्टाइल की जा सकने वाली, और डायरेक्ट पैरामीटर की मदद से स्टाइल को आगे बढ़ाना — **चौथी इमेज.** `Style`, `styleable`, और डायरेक्ट पैरामीटर की मदद से स्टाइल का ट्रांसफ़र.

प्राथमिकता	तरीका	प्रभाव
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(&quot;from their par
ents")
}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 par
ents")
}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

पीछे जाएं

खास जानकारी

आगे बढ़ें

स्टाइल में स्टेट और ऐनिमेशन