📌 Understanding item & items in Lazy Layout (Jetpack Compose) – Brain-Friendly Way 🧠

 

📌 Understanding item & items in Lazy Layout (Jetpack Compose) – Brain-Friendly Way 🧠

Jetpack Compose-এর LazyColumn এবং LazyRow এমন একটা "Smart RecyclerView"-এর মতো, যা শুধু স্ক্রিনে থাকা আইটেমগুলো লোড করে, ফলে মেমোরি খরচ কম হয় এবং পারফরম্যান্স ভালো হয়।

কিন্তু যখন আমরা LazyColumn বা LazyRow ব্যবহার করি, তখন আমাদের item আর items ফাংশন দেখতে পাই। এগুলো কি? কিভাবে কাজ করে? আসুন সহজভাবে বুঝি!

---

🔹 item vs items – মূল পার্থক্য

ফাংশন	কখন ব্যবহার করবেন?	কাজ কি?
item {}	একক (একটি মাত্র) আইটেম যোগ করতে	শুধু একটি নির্দিষ্ট কম্পোজেবল (UI এলিমেন্ট) যোগ করে
items {}	একাধিক আইটেম (লিস্ট বা অ্যারে) যোগ করতে	একটি List বা Array এর সমস্ত আইটেম লুপ করে দেখায়

---

🎯 Example 1: item {} ব্যবহার করা

আমরা যদি একটি মাত্র Text আইটেম দেখাতে চাই, তাহলে item {} ব্যবহার করতে পারি।

LazyColumn {
    item {
        Text(text = "This is a single item")
    }
}

✅ এখানে শুধুমাত্র একটি আইটেম স্ক্রলে দেখাবে।

---

🎯 Example 2: items {} ব্যবহার করা

যখন আমাদের একটি লিস্ট (List) আছে এবং আমরা সেটার সব এলিমেন্ট দেখাতে চাই, তখন items {} ব্যবহার করবো।

val fruits = listOf("🍎 Apple", "🍌 Banana", "🍇 Grapes", "🍉 Watermelon")

LazyColumn {
    items(fruits) { fruit ->
        Text(text = fruit)
    }
}

✅ এটি List-এর প্রতিটি আইটেম একবার করে Text হিসাবে দেখাবে।

---

💡 itemsIndexed {} – যদি Position লাগে?

ধরুন, আমরা প্রতিটি আইটেমের index (পজিশন) সহ দেখাতে চাই। তখন itemsIndexed {} ব্যবহার করবো।

val fruits = listOf("🍎 Apple", "🍌 Banana", "🍇 Grapes", "🍉 Watermelon")

LazyColumn {
    itemsIndexed(fruits) { index, fruit ->
        Text(text = "$index: $fruit")
    }
}

✅ এখন প্রতিটি আইটেমের ক্রমিক নম্বর (index) দেখাবে।

---

🔹 বাস্তব উদাহরণ: LazyColumn-এ হেডার ও লিস্ট একসাথে দেখানো

val names = listOf("Alice", "Bob", "Charlie", "David")

LazyColumn {
    item {
        Text(
            text = "User List",
            style = MaterialTheme.typography.headlineSmall,
            modifier = Modifier.padding(16.dp)
        )
    }

    items(names) { name ->
        Text(text = name, modifier = Modifier.padding(8.dp))
    }
}

✅ প্রথমে একটি Header (User List) দেখাবে, তারপর লিস্টের সব আইটেম দেখাবে।

---

📌 কখন item {} এবং items {} ব্যবহার করবেন?

👉 item {} – যখন শুধু একটা নির্দিষ্ট UI এলিমেন্ট যোগ করতে চান, যেমন Header, Footer, বা Static Content।
👉 items {} – যখন একটি List বা Array থেকে একাধিক UI এলিমেন্ট যোগ করতে চান।

---

🚀 সংক্ষেপে মনে রাখার টিপস:

মনে রাখার ট্রিক	অর্থ
item {} = Single Item	একটি মাত্র আইটেম দেখানোর জন্য
items {} = Multiple Items	লিস্ট থেকে একাধিক আইটেম দেখানোর জন্য
itemsIndexed {} = Index সহ Multiple Items	যদি index সহ দেখাতে চান

এখন Lazy Layout-এর item এবং items নিয়ে আর কোনো কনফিউশন থাকবে না! 😃 🚀