Jetpack Compose: মৌলিক বিষয়, Composable ফাংশন এবং State

Jetpack Compose কী?

Jetpack Compose হল Google-এর UI ফ্রেমওয়ার্ক যা রিঅ্যাকটিভ প্রোগ্রামিং নীতির উপর নির্মিত। Activity-র সাথে XML লেআউট, FragmentManager এবং ViewBinding-এর পরিবর্তে, ডেভেলপার @Composable অ্যানোটেশন সহ Kotlin ফাংশনের মাধ্যমে ইন্টারফেস বর্ণনা করে। Compose LayoutInflater ব্যবহার করে না — UI হল বিশুদ্ধ Kotlin ফাংশন যা বাইটকোডে কম্পাইল হয়। ফ্রেমওয়ার্কটি বেশ কয়েকটি লাইব্রেরি নিয়ে গঠিত: Compose UI (মৌলিক উপাদান Text, Button, Column, Row), Compose Foundation (Material Design, Gestures, Focus), Compose Material3 (Material You with Dynamic Colors) এবং Compose Runtime (State, Side Effects, Coroutines)। Compose Android API 21+ (Android 5.0) তে কাজ করে এবং ComposeView — একটি AndroidView অ্যাডাপ্টারের মাধ্যমে বিদ্যমান View/XML কোডের সাথে সম্পূর্ণ সামঞ্জস্যপূর্ণ।

Compose বনাম View System

View System (2008) ম্যানুয়াল পরিচালনার সাথে View অবজেক্টের একটি শ্রেণিবিন্যাস ব্যবহার করে: ডেভেলপার XML লেআউট তৈরি করে, findViewById-এর মাধ্যমে Views খুঁজে পায়, RecyclerView-এর জন্য Adapter প্রয়োগ করে এবং ডেটা পরিবর্তনে notifyDataSetChanged কল করে। Compose UI-কে কার্যকরীভাবে বর্ণনা করে: যখন অবস্থা পরিবর্তিত হয়, ফ্রেমওয়ার্ক শুধুমাত্র পরিবর্তিত Composable ফাংশনগুলিকে পুনরায় চালায় (recompose), diff গণনা করে এবং Canvas-এ ন্যূনতম পরিবর্তন প্রয়োগ করে। Compose-এর কর্মক্ষমতা View System-এর তুলনীয়, এবং জটিল তালিকা (LazyColumn) সহ পরিস্থিতিতে key প্যারামিটারের মাধ্যমে অপ্রয়োজনীয় উপাদান এড়িয়ে এটি প্রায়শই RecyclerView-কে ছাড়িয়ে যায়। IT Sectr-এ, Compose minSdk 24+ সহ Android অ্যাপ্লিকেশনের নতুন মডিউলের জন্য ব্যবহৃত হয়।

Composable ফাংশন: UI-এর বিল্ডিং ব্লক

@Composable — একটি অ্যানোটেশন যা একটি সাধারণ Kotlin ফাংশনকে UI বিল্ডিং ব্লকে রূপান্তরিত করে। Composable ফাংশনগুলি অন্যান্য Composable ফাংশনকে কল করতে পারে, উপাদানগুলির একটি ট্রি গঠন করে। View-এর বিপরীতে, Composable ফাংশনের ডিফল্টভাবে কোনো অবস্থা নেই — তারা স্টেটলেস এবং ইনপুট প্যারামিটার বা State-এর প্রতিটি পরিবর্তনে পুনরায় আঁকে। Compose Compiler @Composable ফাংশনগুলিকে এমন কোডে রূপান্তর করে যা বাধাগ্রস্ত এবং পুনরায় শুরু করা যেতে পারে (positional memoization) — এটি Compose-কে ট্রি সম্পূর্ণরূপে পুনর্নির্মাণ না করেই শুধুমাত্র পরিবর্তিত অংশগুলি পুনরায় শুরু করতে দেয়।

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

UserProfile ফাংশন name এবং avatarUrl প্যারামিটার হিসাবে গ্রহণ করে, একটি অবতার এবং নাম সহ একটি সারি তৈরি করে। Modifier.fillMaxWidth() উপাদানটিকে সম্পূর্ণ প্রস্থে প্রসারিত করে, .padding(16.dp) প্যাডিং যোগ করে। MaterialTheme.typography.titleMedium সিস্টেম Material 3 শৈলী ব্যবহার করে। যখন name বা avatarUrl প্যারামিটার পরিবর্তিত হয়, Compose UserProfile পুনরায় শুরু করে — নতুন মান সহ উপাদান পুনরায় তৈরি।

Jetpack Compose-এ State এবং Recomposition

State Compose-এ এমন কোনো মান যার পরিবর্তন নির্ভরশীল @Composable ফাংশনের পুনঃসংযোজন (পুনরায় শুরু) ঘটায়। মৌলিক পদ্ধতি হল mutableStateOf(), যা Compose-এর স্ন্যাপশট সিস্টেম সমর্থন সহ MutableState<T> তৈরি করে। স্ন্যাপশট হল পরিবর্তন ট্র্যাকিং প্রক্রিয়া: State-এ লেখার সময়, Compose বর্তমান স্ন্যাপশটকে নোংরা (dirty) হিসাবে চিহ্নিত করে, এবং পুনঃসংযোজন শিডিউলার শুধুমাত্র সেই Composable ফাংশনগুলি পুনরায় শুরু করে যা সেই State পড়ছে। পর্যবেক্ষণযোগ্য সংগ্রহের জন্য mutableStateListOf() এবং mutableStateMapOf() ব্যবহার করুন। Compose Kotlin Flow-এর জন্য collectAsState() এবং LiveData-র জন্য observeAsState()-এর মাধ্যমে Lifecycle-Aware উপাদান থেকে State সমর্থন করে।

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

কোডটি mutableStateOf()-এর মাধ্যমে সংরক্ষিত liked (Boolean) এবং count (Int) অবস্থা সহ একটি "Like" বাটন তৈরি করে। চাপলে, liked উল্টে যায় এবং কাউন্টার বাড়ে/কমে — Compose স্বয়ংক্রিয়ভাবে LikeButton পুনরায় শুরু করে। by ডেলিগেট State-কে সাধারণ ভেরিয়েবলের মতো ব্যবহার করতে দেয়: liked = !liked পরিবর্তে liked.value = !liked.value। বাটনের রঙ প্রাথমিক (পছন্দ করা) এবং surfaceVariant (পছন্দ করা হয়নি) এর মধ্যে প্রতিক্রিয়াশীলভাবে পরিবর্তিত হয়।

remember: পুনঃসংযোজনের মধ্যে ক্যাশিং

remember — একটি Compose ফাংশন যা পুনঃসংযোজনের মধ্যে মান ক্যাশ করে। remember ছাড়া, Composable ফাংশনের প্রতিটি পুনরায় শুরু একটি নতুন অবস্থা (mutableStateOf) তৈরি করে — এটি অ্যাপ্লিকেশন যুক্তি ভঙ্গ করে: স্ক্রিন ঘূর্ণন বা প্যারেন্ট State পরিবর্তনে কাউন্টার রিসেট হয়। remember একটি ক্যালকুলেটর ল্যাম্বডা গ্রহণ করে এবং শুধুমাত্র প্রথম কম্পোজিশনে মান গণনা করে; পরবর্তী কম্পোজিশনে ক্যাশ করা ফলাফল ফেরত দেয়। ক্যাশ রিসেট করতে remember(key) ব্যবহার করুন — কী নির্ধারণ করে কখন মান পুনরায় গণনা করতে হবে। remember(key1, key2) যেকোনো কী পরিবর্তনে পুনরায় গণনা করে। দীর্ঘস্থায়ী অবস্থার (স্ক্রিন ঘূর্ণন সহ্য করা) জন্য rememberSaveable ব্যবহার করুন — SavedStateHandle-এর মাধ্যমে Bundle-এ সংরক্ষণ সহ remember-এর একটি অ্যানালগ।

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Elapsed: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable স্ক্রিন ঘূর্ণনে (কনফিগারেশন পরিবর্তন) seconds সংরক্ষণ করে। LaunchedEffect একটি করুটিন শুরু করে যা প্রতি সেকেন্ডে seconds বাড়ায়। TimerScreen-এর পুনঃসংযোজনে (প্রতি সেকেন্ড) rememberSaveable-এর কারণে seconds রিসেট হয় না। সাধারণ remember ব্যবহার করুন সেই অবস্থার জন্য যা কনফিগারেশন পরিবর্তনগুলি সহ্য করবে না (যেমন, অ্যানিমেশন ফ্ল্যাগ)।

Modifier: Composable সেটিংসের চেইন

Modifier — একটি অপরিবর্তনীয় কন্টেইনার অবজেক্ট যা Composable উপাদানগুলির চেহারা, আচরণ এবং লেআউট কনফিগার করার জন্য Builder প্যাটার্ন প্রয়োগ করে। প্রতিটি Modifier পদ্ধতি কল (.padding(), .width(), .clickable(), .background()) যোগ করা উপাদান সহ একটি নতুন Modifier ফেরত দেয়। মডিফায়ার ক্রম গুরুত্বপূর্ণ: .padding(16.dp).clickable { } — প্যাডিং ক্লিক হ্যান্ডলারের আগে প্রয়োগ করা হয়, clickable প্যাডিং সহ পুরো এলাকা ট্র্যাক করে। .clickable { }.padding(16.dp) — প্যাডিংয়ের আগে পুরো এলাকা ক্লিকযোগ্য, প্যাডিং বিষয়বস্তু ভিতরের দিকে সরিয়ে দেয়। Modifier then(otherModifier) এবং প্যারেন্ট সেটিংস অ্যাক্সেস করার জন্য compositionLocal-এর মাধ্যমে কাস্টম বাস্তবায়ন সমর্থন করে।

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Card clicked") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "Android-এর জন্য State এবং Modifier সহ ঘোষণামূলক UI",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample Modifier চেইন প্রদর্শন করে: fillMaxWidth + padding + clickable। Card নিজস্ব elevation এবং colors সেটিংস সহ একটি Material3 উপাদান। নেস্টেড Column-এর অভ্যন্তরীণ প্যাডিং 16dp। Compose Material3 Android 12+ এ Dynamic Color (Material You)-এর জন্য স্বয়ংক্রিয়ভাবে রঙগুলি অভিযোজিত করে। Card Compose-এ 30+টি অন্তর্নির্মিত Material3 উপাদানের মধ্যে একটি।

State hoisting এবং Compose আর্কিটেকচার

State hoisting — অবস্থাকে Composable ফাংশন থেকে তার কলারে উপরে তোলার প্যাটার্ন, ফাংশনটিকে স্টেটলেস করে তোলে। একটি স্টেটলেস উপাদান State নিজে ধারণ না করে প্যারামিটারের মাধ্যমে ডেটা এবং কলব্যাক গ্রহণ করে। এটি পুনর্ব্যবহারযোগ্যতা এবং পরীক্ষাযোগ্যতা উন্নত করে: উপাদানটি বিভিন্ন States দিয়ে কল করা যায় এবং preview-এ পরীক্ষা করা যায়। Google আর্কিটেকচার সুপারিশ করে: ViewModel + StateFlow (বা MutableStateFlow) + Compose-এ collectAsState()। ViewModel অবস্থাকে স্ক্রিন স্তরে উত্তোলন করে, Compose এটি রেন্ডার করে। সাইড-ইফেক্ট (LaunchedEffect, DisposableEffect) এককালীন ইভেন্টগুলি পরিচালনা করে।