Jetpack Compose-এ Row: এটি কী, composable বৈশিষ্ট্য এবং কীভাবে কাজ করে

Jetpack Compose-এ Row কী

Row একটি composable ফাংশন যা চাইল্ড এলিমেন্টগুলিকে একটি অনুভূমিক ক্রমানুসারে রাখে। Compose লেআউট শ্রেণিবিন্যাসে, Row Column এবং Box-এর পাশাপাশি একটি মৌলিক ধারকের অবস্থান দখল করে।

Row-এর মাত্রা নির্দিষ্ট করার প্রয়োজন নেই — এটি স্বয়ংক্রিয়ভাবে তার বিষয়বস্তুর সাথে সামঞ্জস্য করে। Row-এর প্রস্থ Modifier.fillMaxWidth বা একটি নির্দিষ্ট আকার উল্লেখ না করা পর্যন্ত প্যাডিং সহ চাইল্ড এলিমেন্টের প্রস্থের যোগফলের সমান।

Row-এর চাইল্ড এলিমেন্টগুলির নিজস্ব মডিফায়ার থাকতে পারে যা ধারকের মধ্যে তাদের অবস্থানকে প্রভাবিত করে। উদাহরণস্বরূপ, Modifier.weight এলিমেন্টগুলিকে উপলব্ধ স্থানের একটি আনুপাতিক অংশ দখল করতে দেয়।

Android Developers Blog, 2024 অনুসারে, Row চাইল্ড এলিমেন্টগুলিকে ক্রমানুসারে প্রক্রিয়া করে, Compose পরিমাপের নিয়মের উপর ভিত্তি করে তাদের আকার গণনা করে: প্রথমে weight ছাড়া এলিমেন্টগুলি পরিমাপ করা হয়, তারপর অবশিষ্ট স্থান weight সহ এলিমেন্টগুলির মধ্যে বিতরণ করা হয়।

Row সিনট্যাক্স এবং মৌলিক স্বাক্ষর

Row-এর মৌলিক স্বাক্ষরে modifier প্যারামিটার, horizontalArrangement এবং verticalAlignment অন্তর্ভুক্ত রয়েছে। সমস্ত চাইল্ড এলিমেন্ট চূড়ান্ত কন্টেন্ট ল্যাম্বডা ব্লকে পাস করা হয়।

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "এক")
        Text(text = "দুই")
        Text(text = "তিন")
    }
}

Row-এর বৈশিষ্ট্য: horizontalArrangement এবং verticalAlignment

horizontalArrangement প্যারামিটার নির্ধারণ করে কিভাবে Row-এর ভিতরে অনুভূমিক অক্ষ বরাবর চাইল্ড এলিমেন্টগুলি বিতরণ করা হয়। Arrangement ক্লাস থেকে Start, End, Center, SpaceBetween, SpaceAround এবং SpaceEvenly উপলব্ধ মান।

Arrangement.Start এলিমেন্টগুলিকে ধারকের শুরুতে রাখে, Arrangement.End — শেষে, এবং Arrangement.Center — মাঝখানে। এই মানগুলি CSS Flexbox-এ justify-content প্রপার্টির মতো কাজ করে।

Arrangement.SpaceBetween এলিমেন্টগুলিকে সমানভাবে বিতরণ করে, প্রথম এলিমেন্টটি শুরুতে, শেষটি শেষে এবং বাকিগুলির মধ্যে সমান ফাঁকা রেখে। Material Design Guidelines, 2025 অনুসারে, SpaceBetween টুলবার এবং নেভিগেশন সারির জন্য সর্বোত্তম।

verticalAlignment প্যারামিটার এলিমেন্টগুলিকে উল্লম্বভাবে সারিবদ্ধ করে। Alignment.Top, Alignment.CenterVertically এবং Alignment.Bottom উপলব্ধ মান। এই বৈশিষ্ট্যটি উপযোগী যখন Row এলিমেন্টগুলির বিভিন্ন উচ্চতা থাকে — উদাহরণস্বরূপ, বহু-লাইন টেক্সটের পাশে একটি আইকন।

Arrangement মানের সারণী

Modifier.weight-এর সাথে স্থান বিতরণ

Modifier.weight একটি মডিফায়ার যা শুধুমাত্র Row এবং Column-এর ভিতরে উপলব্ধ যা নির্দিষ্ট মানের অনুপাতে চাইল্ড এলিমেন্টের মধ্যে উপলব্ধ স্থান বিতরণ করে। যদি একটি এলিমেন্টের ওজন 1.0f হয় এবং অন্যটির 2.0f হয়, তবে দ্বিতীয় এলিমেন্টটি দ্বিগুণ স্থান নেবে।

weight ছাড়া এলিমেন্টগুলি তাদের বিষয়বস্তুর জন্য প্রয়োজনীয় স্থান দখল করে। অবশিষ্ট স্থান weight সহ এলিমেন্টগুলির মধ্যে তাদের ওজনের অনুপাতে বিতরণ করা হয়। এই আচরণ CSS Flexbox-এ flex-grow প্রপার্টির মতো।

Android Developer Documentation, 2025 অনুসারে, weight শুধুমাত্র Row, Column এবং BoxWithConstraints-এর ভিতরে কাজ করে। Row-এ weight ব্যবহার করার সময়, সমস্ত চাইল্ড এলিমেন্ট দুটি পাসে পরিমাপ করা হয়: প্রথমে weight ছাড়া এলিমেন্ট, তারপর weight সহ এলিমেন্ট।

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "বাম",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "ডান")
    }
}

Row-এর সাথে কোড উদাহরণ

প্রথম উদাহরণটি একটি আইকন এবং টেক্সট সহ Row প্রদর্শন করে — পরিচিতি তালিকা বা সেটিংসের জন্য একটি সাধারণ দৃশ্যকল্প। Icon এবং Text কেন্দ্রে verticalAlignment সহ Row-এ মোড়ানো হয়।

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "পছন্দে যোগ করুন")
    }
}

দ্বিতীয় উদাহরণটি বাটন এবং সমান বিতরণ সহ Row দেখায়। SpaceEvenly সমস্ত বাটন এবং ধারকের প্রান্তের মধ্যে সমান ফাঁকা নিশ্চিত করে।

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("বাতিল") }
        Button(onClick = {}) { Text("সংরক্ষণ") }
    }
}

তৃতীয় উদাহরণ — রেটিং প্রদর্শনের জন্য Card-এর ভিতরে Row। Modifier.weight সহ একটি নেস্টেড Row রেটিং স্টার এবং সংখ্যাসূচক মানকে নির্দিষ্ট স্থান দখল করতে দেয়।

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "রেটিং:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

অভিযোজিত লেআউটে Row-এর বৈশিষ্ট্য

Row-এর অভিযোজিত লেআউটে প্রস্থ নিয়ন্ত্রণের প্রয়োজন। যদি Row-এর বিষয়বস্তু উপলব্ধ স্ক্রিনের প্রস্থ অতিক্রম করে, তবে এলিমেন্টগুলি ধারকের সীমানা অতিক্রম করতে পারে। এটি প্রতিরোধ করতে, Modifier.horizontalScroll ব্যবহার করুন বা Column-এ স্যুইচ করুন।

Row-কে Modifier.weight-এর সাথে সংযুক্ত করার সময়, প্যারেন্ট Row-এর জন্য fillMaxWidth সেট করা গুরুত্বপূর্ণ — অন্যথায় weight অস্তিত্বহীন স্থান বিতরণ করবে। Material Design Guidelines, 2025 অনুসারে, fillMaxWidth ছাড়া weight সহ Row একটি অবৈধ কনফিগারেশন হিসাবে বিবেচিত হয়।

অভিযোজিত ইন্টারফেসের জন্য, Row-কে Box-এর সাথে সংযুক্ত করতে বা বিভিন্ন স্ক্রিন আকারে স্বয়ংক্রিয় এলিমেন্ট বিতরণের জন্য Arrangement.SpaceBetween ব্যবহার করার পরামর্শ দেওয়া হয়। এটি মিডিয়া কোয়েরি ছাড়াই নমনীয়তা প্রদান করে।

• Modifier.horizontalScroll — Row ওভারফ্লো হলে স্ক্রলিং যোগ করে
• Modifier.weight — আনুপাতিকভাবে স্থান বিতরণ করে
• Arrangement.SpaceBetween — প্রান্তে ফিক্সিং সহ অভিযোজিত বিতরণ