স্টাইলের মৌলিক বিষয়গুলি

আপনার অ্যাপ জুড়ে স্টাইল প্রয়োগ করার তিনটি উপায় রয়েছে:

1. বিদ্যমান কম্পোনেন্টগুলিতে সরাসরি ব্যবহার করুন যেগুলি একটি Style প্যারামিটার প্রকাশ করে।
2. যেসব লেআউট কম্পোজেবল Style প্যারামিটার গ্রহণ করে না, সেগুলোতে Modifier.styleable ব্যবহার করে স্টাইল প্রয়োগ করুন।
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 প্যারামিটারের মতোই, আপনি ল্যাম্বডার ভিতরে background বা padding মতো প্রোপার্টি অন্তর্ভুক্ত করতে পারেন।

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

একাধিক শৃঙ্খলিত Modifier.styleable মডিফায়ার প্রয়োগকৃত কম্পোজেবলের নন-ইনহেরিটেড প্রোপার্টিগুলোর সাথে সংযোজনীয়ভাবে কাজ করে, যা একই প্রোপার্টি নির্ধারণকারী একাধিক মডিফায়ারের মতোই আচরণ করে। ইনহেরিটেড প্রোপার্টিগুলোর ক্ষেত্রে, এগুলো ওভাররাইড হয়ে যায় এবং শৃঙ্খলের সর্বশেষ styleable মডিফায়ারটি মানগুলো নির্ধারণ করে।

Modifier.styleable ব্যবহার করার সময়, স্টেট-ভিত্তিক স্টাইলিং প্রয়োগ করার জন্য আপনি মডিফায়ারের সাথে ব্যবহার করার জন্য একটি StyleState তৈরি ও সরবরাহ করতে চাইতে পারেন। আরও বিস্তারিত জানতে, "State and animations with Styles" দেখুন।

একটি স্বতন্ত্র শৈলী সংজ্ঞায়িত করুন

পুনঃব্যবহারযোগ্যতার উদ্দেশ্যে আপনি একটি স্বতন্ত্র স্টাইল নির্ধারণ করতে পারেন:

val style = Style { background(Color.Blue) }
StylesSnippets.kt

এরপর আপনি সেই নির্ধারিত স্টাইলটি একটি কম্পোজেবলের স্টাইল প্যারামিটারে অথবা Modifier.styleable এর মাধ্যমে পাস করতে পারেন। Modifier.styleable ব্যবহার করার সময়, আপনাকে একটি StyleState অবজেক্টও তৈরি করতে হবে। StyleState সম্পর্কে " State and animations with Styles" ডকুমেন্টেশনে বিস্তারিতভাবে আলোচনা করা হয়েছে।

নিম্নলিখিত উদাহরণটি দেখায় যে কীভাবে আপনি সরাসরি একটি কম্পোনেন্টের বিল্ট-ইন প্যারামিটারের মাধ্যমে, অথবা 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

যখন একাধিক স্টাইল একই প্রপার্টি নির্দিষ্ট করে, তখন সর্বশেষ সেট করা প্রপার্টিটি নির্বাচিত হয়। যেহেতু স্টাইলে প্রপার্টিগুলো যোগ করা যায় না, তাই সর্বশেষ দেওয়া প্যাডিংটি প্রাথমিক contentPadding দ্বারা সেট করা contentPaddingHorizontal কে ওভাররাইড করে। এছাড়াও, সর্বশেষ ব্যাকগ্রাউন্ড কালারটি প্রাথমিক স্টাইল দ্বারা সেট করা ব্যাকগ্রাউন্ড কালারকে ওভাররাইড করে।

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 এ এক্সটেনশন ফাংশন ব্যবহার করে বিদ্যমান Style ডেফিনিশনগুলির সাথে ম্যাপ করে কাস্টম প্রোপার্টি তৈরি করতে পারেন:

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