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

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

क्या करें

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

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

विज़ुअल कॉन्फ़िगरेशन (बैकग्राउंड, पैडिंग, बॉर्डर) के लिए 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

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

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