স্টাইলের সাথে করণীয় এবং করণীয় নয়

এই পৃষ্ঠায় আপনার কোডবেস জুড়ে সামঞ্জস্যতা অর্জনের জন্য স্টাইল নিয়ে কাজ করার সর্বোত্তম পদ্ধতি এবং এপিআই ডিজাইন করার সময় আমরা যে নীতিগুলি অনুসরণ করেছি, তা বর্ণনা করা হয়েছে।

করণীয়

এই সর্বোত্তম অনুশীলনগুলো অনুসরণ করুন:

করণীয়: ভিজ্যুয়ালের জন্য স্টাইল এবং আচরণের জন্য মডিফায়ার ব্যবহার করুন।

ভিজ্যুয়াল কনফিগারেশনের (ব্যাকগ্রাউন্ড, প্যাডিং, বর্ডার) জন্য স্টাইলস এপিআই ব্যবহার করুন এবং ক্লিক লজিক, জেসচার ডিটেকশন বা অ্যাক্সেসিবিলিটির মতো আচরণের জন্য মডিফায়ার সংরক্ষিত রাখুন।

করণীয়: ডিজাইন সিস্টেমে স্টাইল প্যারামিটারগুলো উন্মোচন করুন

আপনার নিজস্ব কাস্টম ডিজাইন-সিস্টেম কম্পোনেন্টগুলোর জন্য, মডিফায়ার প্যারামিটারের পরে একটি 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

একটি 'ডিফল্ট' প্যারামিটার অন্তর্ভুক্ত করতে, আগত প্যারামিটার স্টাইলটিকে সংজ্ঞায়িত ডিফল্টের সাথে মার্জ করুন:

@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

করণীয়: সাবসিস্টেমের মান পরিবর্তনের জন্য একটি স্টাইল তৈরি করুন।

উদাহরণস্বরূপ, ডার্ক এবং লাইট মোডের মধ্যে পরিবর্তন করার সময়, Style গতিশীলভাবে পরিবর্তন করতে বিদ্যমান থিমযুক্ত মানগুলি ( CompositionLocal এর মাধ্যমে) কোয়েরি করুন:

// 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