@Composable: এটি কী, Compose অ্যানোটেশন এবং প্রয়োগের পরিধি

Jetpack Compose-এ @Composable কী

@Composable হল Kotlin ভাষার একটি অ্যানোটেশন যা একটি ফাংশনকে Jetpack Compose ফ্রেমওয়ার্কে ইউজার ইন্টারফেস বর্ণনা করার জন্য চিহ্নিত করে। যখন Kotlin কম্পাইলার এই অ্যানোটেশন দেখে, এটি অতিরিক্ত কোড জেনারেট করে যা ফাংশনকে কম্পোজিশন প্রসঙ্গে — UI ট্রি ম্যানেজমেন্ট সিস্টেমে — কাজ করতে সক্ষম করে।

@Composable অ্যানোটেশন Google 2021 সালে Jetpack Compose 1.0-এর প্রথম স্থিতিশীল সংস্করণের সাথে প্রবর্তন করেছিল। এর আবির্ভাবের আগে, Android-এ ইন্টারফেস ডেভেলপমেন্ট সম্পূর্ণরূপে XML মার্কআপ এবং View সিস্টেমের মাধ্যমে পরিচালিত হত। @Composable পদ্ধতিকে আমূল পরিবর্তন করেছে: আলাদা মার্কআপ ফাইলে UI বর্ণনা করার পরিবর্তে, ডেভেলপার সরাসরি Kotlin-এ ইন্টারফেস লেখে।

@Composable এবং সাধারণ Kotlin ফাংশনের মধ্যে প্রধান পার্থক্য হল অবস্থা পড়ার এবং তার পরিবর্তনে প্রতিক্রিয়া জানানোর ক্ষমতা। যখন একটি ভেরিয়েবল যা Composable ফাংশন পড়ে, তার মান পরিবর্তন করে, সিস্টেম স্বয়ংক্রিয়ভাবে সেই ফাংশনের পুনরারম্ভ (পুনঃকম্পোজিশন) নির্ধারণ করে। এটি ডেভেলপারকে findViewById এবং setText-এর মাধ্যমে ম্যানুয়ালি UI আপডেট করা থেকে মুক্তি দেয়।

@Composable-এর অভ্যন্তরীণ মেকানিক্স স্লট ধারণার উপর ভিত্তি করে — একটি বিশেষ মেমরি এলাকা যা কম্পোজিশনের মধ্যে প্রতিটি ফাংশনের জন্য বরাদ্দ করা হয়। এই স্লট ফাংশনে পাস করা মানগুলি এবং পরবর্তী কলগুলিতে তুলনার জন্য প্রয়োজনীয় সার্ভিস তথ্য সংরক্ষণ করে।

কীভাবে Composable ফাংশন ঘোষণা করবেন

Composable ফাংশন ঘোষণা করার জন্য, fun কীওয়ার্ডের আগে @Composable অ্যানোটেশন যোগ করা যথেষ্ট। ফাংশনটি এমন একটি প্যাকেজে হতে হবে যা androidx.compose.runtime থেকে অ্যানোটেশন ইম্পোর্ট করে। ফাংশনের নাম বড় হাতের অক্ষর দিয়ে শুরু করার পরামর্শ দেওয়া হয় — এটি Compose কমিউনিটিতে ব্যাপকভাবে গৃহীত একটি নিয়ম যা UI উপাদানগুলিকে সাধারণ ফাংশন থেকে দৃশ্যমানভাবে আলাদা করে।

import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("হ্যালো, $name!")
        Button(onClick = { count++ }) {
            Text("$count বার ক্লিক করা হয়েছে")
        }
    }
}

Composable ফাংশনের প্যারামিটার যেকোনো কিছু হতে পারে — প্রিমিটিভ টাইপ, স্ট্রিং, ল্যাম্বডা, এবং এমনকি Slot API-এর মাধ্যমে পাস করা অন্যান্য Composable ফাংশন। পরামর্শ দেওয়া হয় প্যারামিটার অপরিবর্তনীয় (val) রাখার জন্য যাতে পুনঃকম্পোজিশনের সময় পার্শ্বপ্রতিক্রিয়া এড়ানো যায়। সমস্ত পরিবর্তনযোগ্য ডেটা Compose স্টেট মেকানিজমের মাধ্যমে পরিচালনা করা উচিত।

Composable ফাংশন সাধারণ ফাংশনের মতো ইচ্ছামত মান ফেরত দিতে পারে না — তাদের একমাত্র কাজ হল UI ট্রির একটি টুকরো তৈরি বা আপডেট করা। তবে, বিশেষ প্যাটার্ন যেমন State Hoisting বিদ্যমান, যেখানে Compose ফাংশন প্যারামিটারের মাধ্যমে অবস্থা এবং কলব্যাক গ্রহণ করে, বিশুদ্ধ এবং পুনঃব্যবহারযোগ্য থাকে।

Kotlin-এ Composable ফাংশনের নিয়ম

Compose সিস্টেম Composable ফাংশন কেমন দেখতে এবং আচরণ করবে তার উপর বেশ কয়েকটি কঠোর সীমাবদ্ধতা আরোপ করে। প্রথম নিয়ম: একটি Composable ফাংশন শুধুমাত্র অন্যান্য Composable ফাংশন বা সাধারণ ফাংশন কল করতে পারে যার কোনো পার্শ্বপ্রতিক্রিয়া নেই। এটি কম্পোজিশনের পূর্বাভাসযোগ্যতা এবং Compose অপ্টিমাইজেশনের সঠিক কার্যকারিতা নিশ্চিত করে।

দ্বিতীয় নিয়ম নির্বাহের ক্রম সম্পর্কিত। Compose-এর Composable ফাংশন যেকোনো ক্রমে কল করার অধিকার রয়েছে, তাই এই ধরনের ফাংশনের বডিতে কোড প্রতিবেশী ফাংশনের কল সিকোয়েন্সের উপর নির্ভর করা উচিত নয়। প্রতিটি Composable ফাংশনকে UI ট্রিতে তার অবস্থানের স্তরে স্বয়ংসম্পূর্ণ হতে হবে।

তৃতীয় নিয়ম — Composable ফাংশনের বডির ভিতরে পার্শ্বপ্রতিক্রিয়া নিষিদ্ধ। ডাটাবেসে লেখা, নেটওয়ার্ক অনুরোধ পাঠানো বা বাহ্যিক ভেরিয়েবল পরিবর্তনের মতো অপারেশন শুধুমাত্র বিশেষ ইফেক্টের ভিতরে করা উচিত: LaunchedEffect, DisposableEffect, বা SideEffect। এই নিয়ম লঙ্ঘন পুনঃকম্পোজিশনের সময় অপ্রত্যাশিত আচরণের দিকে নিয়ে যায়।

চতুর্থ নিয়ম: Composable ফাংশন অবশ্যই আইডেম্পোটেন্ট হতে হবে। একই আর্গুমেন্ট সহ পুনরায় কল করলে একই UI উৎপন্ন হওয়া উচিত। এই প্রয়োজনীয়তা স্কিপিং অপ্টিমাইজেশনের সঠিক কার্যকারিতার জন্য অপরিহার্য, যেখানে Compose সেই ফাংশনগুলির পুনঃঅঙ্কন এড়িয়ে যায় যাদের ইনপুট ডেটা পরিবর্তিত হয়নি।

// সঠিক: পার্শপ্রতিক্রিয়াহীন বিশুদ্ধ Composable ফাংশন
@Composable
fun UserCard(user: User, onClick: () -> Unit) {
    Card(modifier = Modifier.clickable { onClick() }) {
        Text(text = user.name)
    }
}

// ভুল: বড়ির ভিতরে পার্শপ্রতিক্রিয়া
@Composable
fun WrongCard(userId: String) {
    // val result = viewModel.loadUser(userId)  // অনুমোদিত নয়
    Text("লোড হচ্ছে...")
}

@Composable ব্যবহারের উদাহরণ

আসুন @Composable অ্যানোটেশন ব্যবহার করে একটি প্রোফাইল স্ক্রিন তৈরির ব্যবহারিক উদাহরণ দেখি। এখানে আমরা একাধিক Composable ফাংশন একত্রিত করা, স্টেট এবং মডিফায়ারের সাথে কাজ করা প্রদর্শন করি — যেকোনো Compose লেআউটের মূল উপাদান।

@Composable
fun ProfileScreen(userId: String) {
    var isFollowed by remember { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        ProfileHeader(userId = userId)
        Spacer(modifier = Modifier.height(16.dp))
        StatsRow(posts = 42, followers = 1280)
        Spacer(modifier = Modifier.height(24.dp))
        FollowButton(
            isFollowed = isFollowed,
            onToggle = { isFollowed = !isFollowed }
        )
    }
}

@Composable
fun ProfileHeader(userId: String) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        AsyncImage(model = "https://example.com/avatars/$userId",
            contentDescription = "User avatar")
        Spacer(modifier = Modifier.width(12.dp))
        Text(text = "ব্যবহারকারী #$userId", style = MaterialTheme.typography.headlineMedium)
    }
}

@Composable
fun StatsRow(posts: Int, followers: Int) {
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        StatItem("Posts", posts)
        StatItem("Followers", followers)
    }
}

@Composable
fun StatItem(label: String, value: Int) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "$value", style = MaterialTheme.typography.headlineSmall)
        Text(text = label, style = MaterialTheme.typography.bodySmall)
    }
}

উদাহরণে, প্রতিটি Composable ফাংশন স্ক্রিনের নিজস্ব অংশের জন্য দায়ী: ProfileScreen সামগ্রিক অবস্থা এবং চাইল্ড ফাংশনের কম্পোজিশন পরিচালনা করে, ProfileHeader অবতার এবং নাম প্রদর্শন করে, এবং StatsRow একটি পরিসংখ্যান ব্লক দেখায়। এই পদ্ধতি একক দায়িত্ব নীতি অনুসরণ করে এবং উপাদান পুনঃব্যবহার সহজ করে।

Composable ফাংশনের প্রকার ও তাদের উদ্দেশ্য

Jetpack Compose-এ Composable ফাংশনের তিনটি প্রধান প্রকার রয়েছে। প্রথম প্রকার — কন্টেইনার (Row, Column, Box, LazyColumn) — চাইল্ড উপাদানের বিন্যাস নির্ধারণ করে। দ্বিতীয় প্রকার — প্রদর্শন উপাদান (Text, Image, Icon, Button) — নির্দিষ্ট UI উপাদান রেন্ডার করে। তৃতীয় প্রকার — কাস্টম Composable ফাংশন — বিল্ট-ইন উপাদানগুলিকে পুনঃব্যবহারযোগ্য ব্লকে একত্রিত করে।

কন্টেইনারগুলি সাধারণ উপাদান থেকে আলাদা কারণ তারা content ল্যাম্বডা গ্রহণ করে — @Composable () -> Unit টাইপের শেষ প্যারামিটার। এই মেকানিজম নেস্টেড UI ট্রি তৈরি করতে দেয়: প্রতিটি কন্টেইনার নিজস্ব প্রসঙ্গ এবং মেমরি এলাকা সহ একটি চাইল্ড কম্পোজিশন তৈরি করে।

কাস্টম Composable ফাংশন দুটি উপপ্রকারে বিভক্ত: স্মার্ট (smart) এবং ডাম্ব (dumb)। স্মার্ট ফাংশন অবস্থা এবং লজিক পরিচালনা করে — এতে remember, LaunchedEffect এবং অন্যান্য Compose API-এর কল থাকে। ডাম্ব ফাংশন প্যারামিটারের মাধ্যমে সমস্ত ডেটা গ্রহণ করে এবং শুধু তা প্রদর্শন করে। স্মার্ট এবং ডাম্ব উপাদানে বিভাজন পরীক্ষণযোগ্যতা এবং কোড পুনঃব্যবহার উন্নত করে।

@Composable এবং উপাদান পুনঃব্যবহার

@Composable অ্যানোটেশনের প্রধান সুবিধা হল উত্তরাধিকার এবং জটিল ক্লাস শ্রেণিবিন্যাস ছাড়াই পুনঃব্যবহারযোগ্য UI উপাদান তৈরি করার ক্ষমতা। View সিস্টেমের বিপরীতে, যেখানে প্রতিটি কাস্টম উপাদানের জন্য কনস্ট্রাক্টর সহ একটি Java ক্লাস তৈরি প্রয়োজন ছিল, Composable উপাদান হল কেবল প্যারামিটার সহ একটি Kotlin ফাংশন।

পুনঃব্যবহার নিশ্চিত করতে Slot API প্যাটার্ন ব্যবহার করা হয়, যেখানে Composable ফাংশন তার লেআউটের বিভিন্ন এলাকার জন্য content ল্যাম্বডা গ্রহণ করে। উদাহরণস্বরূপ, Card উপাদান হেডার, বডি এবং ফুটারের জন্য পৃথক কন্টেন্ট গ্রহণ করতে পারে, যা এটিকে অ্যাপ্লিকেশনের যেকোনো স্ক্রিনের জন্য সর্বজনীন করে তোলে।

মডিফায়ার (Modifier) পুনঃব্যবহারে মূল ভূমিকা পালন করে: তারা উপাদান পরিবর্তন না করেই প্যাডিং, সাইজ, ক্লিক এবং অ্যানিমেশন কনফিগার করার অনুমতি দেয়। ডিফল্ট মান সহ Composable ফাংশনের প্যারামিটার হিসাবে Modifier পাস করার পরামর্শ দেওয়া হয়: Modifier = Modifier — এটি Google-এর অফিসিয়াল লাইব্রেরিতে গৃহীত একটি মানক অভ্যাস।

@Composable
fun SectionCard(
    modifier: Modifier = Modifier,
    title: String,
    content: @Composable () -> Unit
) {
    Card(modifier = modifier) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Spacer(modifier = Modifier.height(8.dp))
            content()
        }
    }
}

Slot API-এর জন্য ধন্যবাদ, SectionCard উপাদান বিভিন্ন স্ক্রিনে বিভিন্ন কন্টেন্ট — ফর্ম, তালিকা, টেক্সট ব্লক — সহ ব্যবহার করা যেতে পারে। মডিফায়ার এবং Slot API-এর সংমিশ্রণ Kotlin যে টাইপ সুরক্ষা প্রদান করে তা না হারিয়ে Compose উপাদানগুলিকে অত্যন্ত নমনীয় করে তোলে।