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

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

1. Style প্যারামিটার প্রকাশ করে এমন বিদ্যমান উপাদানগুলিতে সরাসরি ব্যবহার করুন।
2. যেসব লেআউট কম্পোজেবল Style প্যারামিটার গ্রহণ করে না, তাদের উপর Modifier.styleable দিয়ে একটি স্টাইল প্রয়োগ করুন।
3. আপনার নিজস্ব কাস্টম ডিজাইন সিস্টেমে, Modifier.styleable{} ব্যবহার করুন এবং আপনার নিজস্ব উপাদানগুলিতে একটি স্টাইল প্যারামিটার ব্যবহার করুন।

Styles-এ উপলব্ধ প্রপার্টি

স্টাইলগুলি মডিফায়ারদের মতো একই বৈশিষ্ট্যগুলির অনেকগুলি সমর্থন করে; তবে, যা কিছু মডিফায়ার তা স্টাইল দিয়ে প্রতিলিপি করা যায় না। ইন্টারঅ্যাকশন, কাস্টম অঙ্কন, বা বৈশিষ্ট্যের স্ট্যাকিং এর মতো নির্দিষ্ট আচরণের জন্য আপনার এখনও মডিফায়ার প্রয়োজন।

গ্রুপিং	বৈশিষ্ট্য	সন্তানদের দ্বারা উত্তরাধিকারসূত্রে প্রাপ্ত
লেআউট এবং সাইজিং
প্যাডিং	contentPadding (ভিতরের) এবং externalPadding (বাহ্যিক)। দিকনির্দেশক, অনুভূমিক, উল্লম্ব এবং সর্ব-পার্শ্বিক রূপে উপলব্ধ।	না
মাত্রা	fillWidth/Height/Size() এবং 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/Y , rotationX/Y/Z	না
নিয়ন্ত্রণ	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")
}
StylesSnippets.kt

ল্যাম্বডা স্টাইলের মধ্যে, আপনি বিভিন্ন বৈশিষ্ট্য সেট করতে পারেন, যেমন externalPadding অথবা background :

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

সমর্থিত বৈশিষ্ট্যের সম্পূর্ণ তালিকার জন্য, Styles-এ উপলব্ধ বৈশিষ্ট্যগুলি দেখুন।

কোনও বিদ্যমান প্যারামিটার ছাড়াই উপাদানগুলির জন্য মডিফায়ার ব্যবহার করে স্টাইল প্রয়োগ করুন

যেসব কম্পোনেন্টে বিল্ট-ইন স্টাইল প্যারামিটার নেই, সেসব কম্পোনেন্টের জন্য আপনি 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 মডিফায়ারগুলি প্রয়োগকৃত কম্পোজেবলের উপর অ-উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্য সহ সংযোজক, একই বৈশিষ্ট্য সংজ্ঞায়িত একাধিক মডিফায়ারের মতো একই আচরণ করে। উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যের জন্য, এগুলি ওভাররাইড করা হয় এবং শৃঙ্খলে শেষ styleable মডিফায়ারটি মান সেট করে।

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

একটি স্বতন্ত্র স্টাইল নির্ধারণ করুন

পুনঃব্যবহারের উদ্দেশ্যে আপনি একটি স্বতন্ত্র স্টাইল সংজ্ঞায়িত করতে পারেন:

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

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

নিচের উদাহরণটি দেখায় কিভাবে আপনি সরাসরি একটি কম্পোনেন্টের বিল্ট-ইন প্যারামিটারের মাধ্যমে অথবা একটি Modifier.styleable এর মাধ্যমে একটি Style প্রয়োগ করতে পারেন:

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

আপনি সেই Style কে একাধিক উপাদানে স্থানান্তর করতে পারেন:

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

চিত্র ১. দুটি ব্যাকগ্রাউন্ড রঙের সেট এবং দুটি contentPadding ওভাররাইড সহ বোতাম।

একাধিক স্টাইল অবজেক্ট মার্জ করুন

আপনি একাধিক স্টাইল অবজেক্ট তৈরি করতে পারেন এবং সেগুলিকে আপনার কম্পোজেবলের স্টাইল প্যারামিটারে পাস করতে পারেন।

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

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}
StylesSnippets.kt

চিত্র ২. ব্যাকগ্রাউন্ড কালার এবং contentPaddingTop সেট সহ বোতাম।

যখন একাধিক স্টাইল একই বৈশিষ্ট্য নির্দিষ্ট করে, তখন শেষ সেট বৈশিষ্ট্যটি বেছে নেওয়া হয়। যেহেতু স্টাইলগুলিতে বৈশিষ্ট্যগুলি যোগযোগ্য নয়, তাই পাস করা শেষ প্যাডিংটি প্রাথমিক 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

চিত্র ৩. বিভিন্ন স্টাইল দ্বারা ওভাররাইড করা contentPadding সহ বোতাম।

স্টাইল উত্তরাধিকার

কিছু স্টাইল প্রোপার্টি, যেমন contentColor এবং টেক্সট স্টাইল-সম্পর্কিত প্রোপার্টি, চাইল্ড কম্পোজেবলে প্রচারিত হয়। চাইল্ড কম্পোজেবলের উপর সেট করা স্টাইল সেই নির্দিষ্ট সন্তানের জন্য উত্তরাধিকারসূত্রে প্রাপ্ত প্যারেন্ট স্টাইলিংকে ওভাররাইড করে।

চিত্র ৪. Style , styleable এবং ডাইরেক্ট প্যারামিটার সহ স্টাইল প্রচার।

অগ্রাধিকার	পদ্ধতি	প্রভাব
১ (সর্বোচ্চ)	একটি কম্পোজেবলের উপর সরাসরি যুক্তি	সবকিছু ওভাররাইড করে; উদাহরণস্বরূপ, Text(color = Color.Red)
২	স্টাইল প্যারামিটার	স্থানীয় স্টাইল Text(style = Style { contentColor(Color.Red)} কে ওভাররাইড করে
৩	মডিফায়ার চেইন	কম্পোনেন্টের উপরই Modifier.styleable{ contentColor(Color.Red) ।
৪ (সর্বনিম্ন)	মূল শৈলী	যেসব বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া যেতে পারে (টাইপোগ্রাফি/রঙ) সেগুলি পিতামাতার কাছ থেকে চলে আসে।

দ্রষ্টব্য: একাধিক শৃঙ্খলিত 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("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 s অ্যাক্সেস করতে পারে:

val buttonStyle = Style {
    contentPadding(12.dp)
    shape(RoundedCornerShape(50))
    background(Brush.verticalGradient(LocalCustomColors.currentValue.background))
}
StylesSnippets.kt