Column: Compose-এ উল্লম্ব বিন্যাস এবং কন্টেইনার কনফিগারেশন

Jetpack Compose-এ Column কী

Column একটি Composable ফাংশন যা ঐচ্ছিক প্যারামিটার নেয়: modifier, verticalArrangement, horizontalAlignment এবং content — ColumnScope সহ একটি ল্যাম্বডা। Column-এর ভিতরে, চাইল্ড Composable ফাংশনগুলি ঘোষণা ক্রমে উপরে থেকে নীচে সাজানো হয়। Column-এর উচ্চতা চাইল্ড উচ্চতার যোগফল এবং Arrangement দ্বারা নির্দিষ্ট স্থানের সমান। প্রস্থ Alignment বিবেচনায় রেখে সর্বোচ্চ চাইল্ড প্রস্থের সমান।

Column একটি অদৃশ্য কন্টেইনার: ডিফল্টভাবে এর কোনো ব্যাকগ্রাউন্ড বা বর্ডার নেই। আপনার যদি ব্যাকগ্রাউন্ডের প্রয়োজন হয়, Column-এ Modifier.background() যোগ করুন। LazyColumn-এর বিপরীতে, Column সব চাইল্ড এলিমেন্ট একসাথে রেন্ডার করে এবং ভার্চুয়ালাইজেশন সমর্থন করে না। এর মানে হল Column শুধুমাত্র ছোট ডেটা সেটের জন্য উপযুক্ত — 10-15টি এলিমেন্ট পর্যন্ত। লম্বা তালিকার জন্য, LazyColumn ব্যবহার করুন।

ColumnScope হল Column-এর content ল্যাম্বডার জন্য রিসিভার। এটি অতিরিক্ত মডিফায়ার প্রদান করে যা শুধুমাত্র Column-এর ভিতরে কাজ করে: weight(), align(), alignByBaseline()। এই মডিফায়ারগুলি Column-এর বাইরে কোনো অর্থ রাখে না কারণ এগুলো উল্লম্ব লেআউটের নির্দিষ্টতার উপর নির্ভর করে। উদাহরণস্বরূপ, Modifier.align(Alignment.CenterHorizontally) একটি চাইল্ড এলিমেন্টকে Column-এর কেন্দ্রে অনুভূমিকভাবে সারিবদ্ধ করে।

Column-এর প্যারামিটার: Arrangement, Alignment, Modifier

VerticalArrangement নির্ধারণ করে কীভাবে এলিমেন্টগুলোর মধ্যে উল্লম্ব স্থান বিতরণ করা হয়। উপলব্ধ মান: Arrangement.Top (ডিফল্ট), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround। যদি Column-এর উচ্চতা এলিমেন্টের উচ্চতার যোগফলের চেয়ে বেশি হয়, তাহলে Arrangement খালি স্থান বিতরণ করে। যদি এলিমেন্টগুলি পুরো উচ্চতা দখল করে, তাহলে Arrangement-এর কোনো প্রভাব নেই।

HorizontalAlignment প্রতিটি চাইল্ড এলিমেন্টের অনুভূমিক সারিবদ্ধতা নির্ধারণ করে। Alignment.Start (LTR-এর জন্য ডিফল্ট), CenterHorizontally, End। Alignment প্রতিটি এলিমেন্টের উপর স্বাধীনভাবে কাজ করে: যদি একটি এলিমেন্ট সরু এবং অন্যটি চওড়া হয়, তাহলে প্রথমটি সারিবদ্ধ হবে, দ্বিতীয়টি Column-এর সীমানার বাইরে যেতে পারে। Alignment তখনই কাজ করে যখন Column-এর একটি নির্দিষ্ট প্রস্থ বা fillMaxWidth থাকে।

Column-এর জন্য Modifier: Column একটি Modifier গ্রহণ করে যা কন্টেইনারের উপরই প্রয়োগ হয়। Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — সব স্ট্যান্ডার্ড মডিফায়ার কাজ করে। বিশেষ নোট: Modifier.height(IntrinsicSize.Min) Column-কে Intrinsic মাপ ব্যবহার করে চাইল্ড এলিমেন্টের উপর ভিত্তি করে ন্যূনতম উচ্চতা গণনা করতে বাধ্য করে।

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("উপরে", modifier = Modifier.background(Color.Cyan))
        Text("মধ্য", modifier = Modifier.background(Color.Magenta))
        Text("নীচে", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column কন্টেন্ট অনুযায়ী উচ্চতা সামঞ্জস্য করে
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("ছোট টেক্সট")
        Text("একটি খুব লম্বা টেক্সট যা কলামের ভিতরে মোড়াবে")
    }
}

Column weight: এলিমেন্টগুলোর মধ্যে স্থান বিতরণ

Modifier.weight() একটি ColumnScope মডিফায়ার যা Column এলিমেন্টগুলোর মধ্যে খালি উল্লম্ব স্থান নির্দিষ্ট ওজনের অনুপাতে বিতরণ করে। যদি Column 400dp উচ্চতা দখল করে এবং চাইল্ড এলিমেন্ট মোট 100dp হয়, তাহলে বাকি 300dp ওজন এলিমেন্টগুলোর মধ্যে ভাগ হয়। weight(2f) সহ একটি এলিমেন্ট weight(1f) সহ এলিমেন্টের চেয়ে দ্বিগুণ স্থান পাবে।

fill — weight-এর দ্বিতীয় প্যারামিটার: weight(weight: Float, fill: Boolean = true)। যদি fill = true (ডিফল্ট), এলিমেন্টটি উপলব্ধ পুরো উচ্চতা পর্যন্ত প্রসারিত হয়। যদি fill = false, এলিমেন্টটি শুধুমাত্র তার নিজস্ব উচ্চতা নেয় এবং বাকি স্থান খালি থাকে। এটি তখন উপযোগী যখন এলিমেন্টটি এক পাশে সংযুক্ত থাকা উচিত কিন্তু weight শুধুমাত্র খালি স্থান বিতরণের অনুপাত নির্ধারণ করে।

Weight সীমাবদ্ধতা: weight শুধুমাত্র নির্দিষ্ট উচ্চতা বা fillMaxHeight() সহ Column-এ কাজ করে। যদি Column-এর উচ্চতা চাইল্ড এলিমেন্ট (wrap content) দ্বারা নির্ধারিত হয়, তাহলে ওজনের কোনো অর্থ নেই — বিতরণের জন্য কোনো খালি স্থান নেই। এছাড়া, একই এলিমেন্টে Modifier.height()-এর সাথে weight একত্রিত করা যাবে না — এগুলি দ্বন্দ্ব করে এবং weight উপেক্ষা করা হয়।

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // উচ্চতার 1/6 নেয় (weight 1, যোগফল 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // উচ্চতার 2/6 নেয়
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // উচ্চতার 3/6 নেয়
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column বনাম LazyColumn: কখন কী ব্যবহার করবেন

Column সব চাইল্ড এলিমেন্ট তাৎক্ষণিকভাবে রেন্ডার করে। যদি 10-15টির বেশি এলিমেন্ট থাকে, তাহলে Column কম্পোজিশন এবং মাপার উপর উল্লেখযোগ্য চাপ সৃষ্টি করে। LazyColumn, এর বিপরীতে, শুধুমাত্র দৃশ্যমান এলিমেন্ট রেন্ডার করে এবং অদৃশ্যগুলো পুনরায় ব্যবহার করে। লম্বা তালিকা, হাজার হাজার এলিমেন্টের তালিকা, অসীম তালিকা বা চ্যাটের জন্য — LazyColumn আবশ্যক।

কখন Column ভাল: ফর্ম স্ক্রিন (3-10 ফিল্ড), প্রোফাইল কার্ড, আইকন সহ উল্লম্ব কলাম, মেনু। Column IntrinsicSize-ও সমর্থন করে, যা অভিযোজিত উচ্চতার জন্য উপযোগী। এছাড়া, Column ডিবাগ করা সহজ — কোনো ভার্চুয়ালাইজেশন নেই, সব এলিমেন্ট Layout Inspector-এ দৃশ্যমান। স্ট্যাটিক UI-এর জন্য, Column সঠিক পছন্দ।

LazyColumn প্রদান করে: আইটেম ক্যাশিং, কী-ভিত্তিক পরিচয়, যোগ/মুছে ফেলার অ্যানিমেশন (animateItemPlacement), স্টিকি হেডার। যদি তালিকায় বিভিন্ন ধরনের এলিমেন্ট (বিভিন্ন viewType) থাকে, তাহলে items-এ sealed class সহ LazyColumn ব্যবহার করুন। Column স্টিকি হেডার সমর্থন করে না (এগুলি স্ক্রলযোগ্য Column-এর মাধ্যমে অনুকরণ করতে হয়)। এছাড়া, LazyColumn GridCells ব্যবহার করার সময় LazyVerticalGrid সমর্থন করে।

Column ব্যবহারের ব্যবহারিক উদাহরণ

আসুন একটি ব্যবহারকারী প্রোফাইল স্ক্রিন দেখি যেখানে Column অ্যাভাটার, নাম, বায়ো এবং অ্যাকশন বাটনের জন্য প্রধান কন্টেইনার হিসেবে ব্যবহৃত হয়। এখানে, IntrinsicSize.Min সহ Column কন্টেন্টের সাথে সামঞ্জস্য হয় এবং weight বিভাগগুলোর মধ্যে স্থান বিতরণ করতে ব্যবহৃত হয়।

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // অ্যাভাটার
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // নাম
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // বায়ো
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // অ্যাকশন বাটন
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("বার্তা") }
                OutlinedButton(onClick = { }) { Text("অনুসরণ করুন") }
            }
        }
    }
}

উদাহরণে, Column এলিমেন্টগুলোর মধ্যে সমান ফাঁকা রাখতে Arrangement.spacedBy(8.dp) ব্যবহার করে। horizontalAlignment = CenterHorizontally অ্যাভাটার, নাম এবং বায়োকে কেন্দ্র করে। Column-এর ভিতরে Row হল একটি সারিতে বাটনের জন্য নেস্টেড কন্টেইনার। Column (উল্লম্ব বিন্যাস) এবং Row (অনুভূমিক বিন্যাস)-এর এই সংমিশ্রণ Compose-এ UI নির্মাণের একটি সাধারণ প্যাটার্ন।