स्टाइल से जुड़ी ज़रूरी बातें

इस पेज पर, स्टाइल के साथ काम करने के सबसे सही तरीके बताए गए हैं. इन तरीकों से, आपके कोडबेस में एक जैसी स्टाइल का इस्तेमाल किया जा सकता है. साथ ही, इसमें उन सिद्धांतों के बारे में भी बताया गया है जिनका हमने एपीआई डिज़ाइन करते समय पालन किया है.

क्या करें

इन सबसे सही तरीकों को अपनाएं:

यह करें: विज़ुअल के लिए स्टाइल और व्यवहार के लिए मॉडिफ़ायर का इस्तेमाल करें

विज़ुअल कॉन्फ़िगरेशन (बैकग्राउंड, पैडिंग, बॉर्डर) के लिए Styles API का इस्तेमाल करें. साथ ही, क्लिक लॉजिक, जेस्चर का पता लगाने या ऐक्सेसिबिलिटी जैसे व्यवहारों के लिए, रिज़र्व किए गए मॉडिफ़ायर का इस्तेमाल करें.

यह काम करें: डिज़ाइन सिस्टम में स्टाइल पैरामीटर दिखाएं

अपने कस्टम डिज़ाइन-सिस्टम कॉम्पोनेंट के लिए, आपको मॉडिफ़ायर पैरामीटर के बाद Style ऑब्जेक्ट को दिखाना चाहिए.

@Composable
fun GradientButton(
    modifier: Modifier = Modifier,
    // ✅ DO: for design system components, expose a style modifier to consumers to be able to customize the components
    style: Style = Style
) {
    // Consume the style
}
DosDonts.kt

क्या करें: विज़ुअल पर आधारित पैरामीटर को स्टाइल से बदलें

अपने कंपोज़ेबल पर मौजूद पैरामीटर को एक ही Style पैरामीटर से बदलें. उदाहरण के लिए:

// Before
@Composable
fun OldButton(background: Color, fontColor: Color) {
}

// After
// ✅ DO: Replace visual-based parameters with a style that includes same properties
@Composable
fun NewButton(style: Style = Style) {
}
DosDonts.kt

यह करें: ऐनिमेशन के लिए स्टाइल को प्राथमिकता दें

मॉडिफ़ायर की तुलना में बेहतर परफ़ॉर्मेंस के लिए, ऐनिमेशन के साथ स्टेट-आधारित स्टाइलिंग के लिए, पहले से मौजूद animate ब्लॉक का इस्तेमाल करें.

यह करें: "लास्ट-राइट-विंस" का फ़ायदा लें

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

क्या न करें

इन पैटर्न का इस्तेमाल न करने का सुझाव दिया जाता है:

यह न करें: इंटरैक्शन लॉजिक के लिए स्टाइल का इस्तेमाल न करें

स्टाइल में onClick या जेस्चर का पता लगाने की कोशिश न करें. स्टाइल, स्थिति के आधार पर विज़ुअल कॉन्फ़िगरेशन तक सीमित होती हैं. इसलिए, उन्हें कारोबार के लॉजिक को हैंडल नहीं करना चाहिए. इसके बजाय, उनमें सिर्फ़ स्थिति के आधार पर अलग-अलग विज़ुअल होने चाहिए.

यह न करें: डिफ़ॉल्ट पैरामीटर के तौर पर डिफ़ॉल्ट स्टाइल दें

स्टाइल पैरामीटर हमेशा style: Style = Style का इस्तेमाल करके तय किए जाने चाहिए:

@Composable
fun BadButton(
    modifier: Modifier = Modifier,
    // ❌ DON'T set a default style here as a parameter
    style: Style = Style { background(Color.Red) }
) {
}
DosDonts.kt

"default" पैरामीटर को शामिल करने के लिए, इनकमिंग पैरामीटर स्टाइल को डिफ़ॉल्ट तौर पर तय की गई स्टाइल के साथ मर्ज करें:

@Composable
fun GoodButton(
    modifier: Modifier = Modifier,
    // ✅ Do: always pass it as a Style, do not pass other defaults
    style: Style = Style
) {
    // ...
    val defaultStyle = Style { background(Color.Red) }
    // ✅ Do Combine defaults inside with incoming parameter
    Box(modifier = modifier.styleable(styleState, defaultStyle, style)) {
      // your logic
    }
}
DosDonts.kt

स्टाइल पैरामीटर न दें: लेआउट पर आधारित कंपोज़ेबल को स्टाइल पैरामीटर न दें

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

यह न करें: कंपोज़िशन में स्टाइल बनाना

CompositionLocals को स्टाइल तय करते समय पढ़ा जाता है, न कि इस्तेमाल करते समय. स्टाइल का इस्तेमाल करने पर, CompositionLocal की स्थिति बदल सकती है. इससे स्टाइल सटीक नहीं रहती.

// DON'T - Create styles in Composition that access composition locals in this way - this will likely lead to issues when style is used / accessed, as it would not get updated when the value changes.
@Composable
fun containerStyle(): Style {
    val background = MaterialTheme.colorScheme.background
    val onBackground = MaterialTheme.colorScheme.onBackground
    return Style {
        background(background)
        contentColor(onBackground)
    }
}

// Do: Instead, Create StyleScope extension functions for your subsystems to access themed composition Locals
val StyleScope.colors: JetsnackColors
    get() = JetsnackTheme.LocalJetsnackTheme.currentValue.colors

val StyleScope.typography: androidx.compose.material3.Typography
    get() = JetsnackTheme.LocalJetsnackTheme.currentValue.typography
val StyleScope.shapes: Shapes
    get() = JetsnackTheme.LocalJetsnackTheme.currentValue.shapes
// Access CompositionLocals
val button = Style {
    background(colors.brandSecondary)
    shape(shapes.small)
}
DosDonts.kt

यह करें: सबसिस्टम की वैल्यू में हुए बदलावों के लिए एक स्टाइल बनाएं

उदाहरण के लिए, गहरे और हल्के रंग वाले मोड के बीच स्विच करते समय, थीम के हिसाब से मौजूद वैल्यू (CompositionLocal के ज़रिए) के लिए क्वेरी करें, ताकि Style को डाइनैमिक तरीके से बदला जा सके:

// Do: Use CompositionLocals or themed values to create a single style
val buttonStyle = Style {
    background(colors.brandSecondary)
    shape(shapes.small)
}
DosDonts.kt

ऐसा करें: जब थीम की परिभाषाओं में कॉम्पोनेंट का बुनियादी अंतर हो, तब पूरी स्टाइल बदलें

अगर थीम बुनियादी तौर पर अलग-अलग हैं, तो थीम लेवल पर पूरे स्टाइल ऑब्जेक्ट बदले जा सकते हैं.

उदाहरण के लिए, अगर आपको ऐसा ऐप्लिकेशन बनाना है जिसमें हर प्रॉडक्ट / पेज या ऑफ़र के लिए अलग-अलग थीम हों और स्टाइल की कई प्रॉपर्टी अलग-अलग हों, तो थीम लेवल पर स्टाइल के पूरे सेट को बदलना सही है.

// DO Switch out whole styles when many properties differ - if Product A and Product B are two white labelled apps that provide different Themes.
val productBThemedButton = Style {
    shape(shapes.small)
    background(colors.brandSecondary)
    // other properties are fundamentally different
}

val productAThemedButton = Style {
    shape(shapes.large)
    background(colors.brand)
    // other properties are fundamentally different
}
DosDonts.kt