জেটপ্যাক কম্পোজের থিমগুলো বেশ কিছু নিম্ন-স্তরের কাঠামো এবং সংশ্লিষ্ট এপিআই (API) দিয়ে গঠিত। এগুলো MaterialTheme -এর সোর্স কোডে দেখা যায় এবং কাস্টম ডিজাইন সিস্টেমেও প্রয়োগ করা যায়।
থিম সিস্টেম ক্লাস
একটি থিম সাধারণত বেশ কয়েকটি সাবসিস্টেম নিয়ে গঠিত হয়, যেগুলো সাধারণ দৃশ্যগত এবং আচরণগত ধারণাগুলোকে একত্রিত করে। এই সিস্টেমগুলোকে ক্লাস দিয়ে মডেল করা যায়, যেগুলোর থিমিং ভ্যালু থাকে।
উদাহরণস্বরূপ, MaterialTheme মধ্যে ColorScheme (রঙ ব্যবস্থা), Typography (টাইপোগ্রাফি ব্যবস্থা), এবং Shapes (আকৃতি ব্যবস্থা) অন্তর্ভুক্ত থাকে।
@Immutable data class ColorSystem( val color: Color, val gradient: List<Color> /* ... */ ) @Immutable data class TypographySystem( val fontFamily: FontFamily, val textStyle: TextStyle ) /* ... */ @Immutable data class CustomSystem( val value1: Int, val value2: String /* ... */ ) /* ... */
থিম সিস্টেম রচনা স্থানীয়
থিম সিস্টেম ক্লাসগুলো CompositionLocal ইনস্ট্যান্স হিসেবে কম্পোজিশন ট্রি-তে অন্তর্নিহিতভাবে সরবরাহ করা হয়। এর ফলে কম্পোজেবল ফাংশনগুলোতে থিমিং ভ্যালুগুলোকে স্ট্যাটিক্যালি রেফারেন্স করা যায়।
CompositionLocal সম্পর্কে আরও জানতে, “ Locally scoped data with CompositionLocal” গাইডটি দেখুন।
val LocalColorSystem = staticCompositionLocalOf { ColorSystem( color = Color.Unspecified, gradient = emptyList() ) } val LocalTypographySystem = staticCompositionLocalOf { TypographySystem( fontFamily = FontFamily.Default, textStyle = TextStyle.Default ) } val LocalCustomSystem = staticCompositionLocalOf { CustomSystem( value1 = 0, value2 = "" ) } /* ... */
থিম ফাংশন
থিম ফাংশন হলো এন্ট্রি পয়েন্ট এবং প্রাথমিক এপিআই। এটি রিয়েল ভ্যালু এবং প্রয়োজনীয় লজিক ব্যবহার করে থিম সিস্টেমের CompositionLocal এর ইনস্ট্যান্স তৈরি করে, যা CompositionLocalProvider এর মাধ্যমে কম্পোজিশন ট্রি-তে সরবরাহ করা হয়। content প্যারামিটারটি নেস্টেড কম্পোজেবলগুলোকে হায়ারার্কির সাপেক্ষে থিমিং ভ্যালু অ্যাক্সেস করার সুযোগ দেয়।
@Composable fun Theme( /* ... */ content: @Composable () -> Unit ) { val colorSystem = ColorSystem( color = Color(0xFF3DDC84), gradient = listOf(Color.White, Color(0xFFD7EFFF)) ) val typographySystem = TypographySystem( fontFamily = FontFamily.Monospace, textStyle = TextStyle(fontSize = 18.sp) ) val customSystem = CustomSystem( value1 = 1000, value2 = "Custom system" ) /* ... */ CompositionLocalProvider( LocalColorSystem provides colorSystem, LocalTypographySystem provides typographySystem, LocalCustomSystem provides customSystem, /* ... */ content = content ) }
থিম অবজেক্ট
সুবিধাজনক প্রোপার্টিসহ একটি অবজেক্ট ব্যবহার করে থিম সিস্টেম অ্যাক্সেস করা হয়। সামঞ্জস্য রক্ষার জন্য, অবজেক্টটির নাম সাধারণত থিম ফাংশনের নামের মতোই রাখা হয়। এই প্রোপার্টিগুলো কেবল বর্তমান কম্পোজিশন লোকাল ভেরিয়েবলটি খুঁজে বের করে।
// Use with eg. Theme.colorSystem.color object Theme { val colorSystem: ColorSystem @Composable get() = LocalColorSystem.current val typographySystem: TypographySystem @Composable get() = LocalTypographySystem.current val customSystem: CustomSystem @Composable get() = LocalCustomSystem.current /* ... */ }
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলেও লিঙ্কের লেখা প্রদর্শিত হয়।
- CompositionLocal সহ স্থানীয়ভাবে স্কোপ করা ডেটা
- কম্পোজে কাস্টম ডিজাইন সিস্টেম
- কম্পোজে ম্যাটেরিয়াল ডিজাইন ৩