লেআউট কন্টেনার

আপনার UI কম্পোনেন্ট স্ট্রাকচার ও সাজাতে সাহায্য করার জন্য Jetpack Compose একাধিক লেআউট কন্টেনার প্রদান করে। Row এবং Column-এর মতো মৌলিক লেআউট কম্পোজেবলগুলি সহজ ব্যবস্থা পরিচালনা করে, তবে স্ক্রিনের আকার পরিবর্তন এবং ব্যবহারকারীর ডেটা বৃদ্ধির সাথে সাথে অনেক অ্যাপের আরও প্রতিক্রিয়াশীল এবং অভিযোজিত কন্টেইনার সমাধানের প্রয়োজন হয়।

লে-আউট কন্টেনারে নিম্নলিখিতগুলি অন্তর্ভুক্ত থাকে:

  • লেজি লিস্ট ও লেজি গ্রিড: LazyColumn, LazyRow ও LazyVerticalGrid-এর মতো কম্পোনেন্ট যা বর্তমানে ভিউপোর্টে দেখা যাচ্ছে এমন আইটেম কম্পোজ ও লেআউট করার মাধ্যমে দক্ষতার সাথে বড় বা ডায়নামিক সাইজের ডেটা সেট দেখায়।
  • পেজার: HorizontalPager এবং VerticalPager-এর মতো কন্টেনার যা ব্যবহারকারীদের কন্টেন্টের পৃষ্ঠাগুলির মধ্যে সোয়াইপ বা স্ক্রল করতে দেয়।
  • ফ্লো লেআউট: রেসপন্সিভ এক-মাত্রিক কন্টেনার (FlowRow এবং FlowColumn) যা জায়গা শেষ হয়ে গেলে উপচে পড়া আইটেমগুলিকে অটোমেটিক পরবর্তী সারি বা কলামে র‌্যাপ করে।
  • গ্রিড: একটি ফ্লেক্সিবল, দ্বিমাত্রিক স্ট্রাকচার যা কন্টেনারের সাইজ অনুযায়ী মাল্টি-কলাম বা মাল্টি-রো লেআউটে আইটেম দেখায়।
  • FlexBox: CSS Flexbox-এর দ্বারা অনুপ্রাণিত, অ্যাডাপ্টিভ কন্টেনার যা উপলভ্য স্পেস পূরণ করার জন্য আইটেম কীভাবে র‍্যাপ, বড়, ছোট এবং প্রধান ও ক্রস অক্ষ বরাবর অ্যালাইন করা হবে তার উপর গ্র্যানুলার কন্ট্রোল প্রদান করে।

সঠিক লেআউট কন্টেনার বেছে নিন

Compose-এ লেআউট তৈরি করার সময়, বেসিক ও আরও উন্নত লেআউট কন্টেনারের মধ্যে থেকে বেছে নেওয়া আপনার ডিজাইনের উপর নির্ভর করে, যেমন জায়গা কম থাকলে আইটেম র‍্যাপ করতে হবে কিনা এবং আইটেম কীভাবে ডায়নামিক পদ্ধতিতে ছোট বড় করা হবে।

নিচের সারণীতে প্রতিটি Compose 1D লেআউট কন্টেনারের ক্ষমতার সংক্ষিপ্ত বিবরণ দেওয়া হল:

কন্টেনার

আইটেম নতুন লাইনে র‍্যাপ করে

প্রতিটি আইটেম বড় করা

প্রতি আইটেম সঙ্কুচিত করা

প্রতিটি আইটেমের প্রাথমিক সাইজ

একাধিক লাইনে উপলভ্য জায়গা পূরণ করার জন্য আইটেম বড় হয়

আইটেম আবার সাজান

ধীরে ধীরে লোড করা

এগুলির জন্য সেরা:

সারি / কলাম

❌

✅ (weight-এর মাধ্যমে) শুধুমাত্র একটি লাইন

❌

❌

❌

❌

❌

  • ছোট, নির্দিষ্ট সংখ্যক আইটেম সহ ইউনিফর্ম সারি। আইটেমগুলি উপলভ্য সীমার মধ্যে ফিট করে এবং একাধিক লাইন জুড়ে মোড়ানোর প্রয়োজন হয় না।

FlowRow / FlowColumn

✅

সীমিত

❌

❌

আংশিক

❌

❌

  • FlexBox-এর দ্বারা স্থান অধিকার করা হয়েছে।

LazyRow / LazyColumn

❌

❌

❌

❌

❌

❌

✅

  • আইটেমের দীর্ঘ বা অসীম তালিকা যেখানে পারফর্ম্যান্স অপ্টিমাইজেশনের জন্য শুধুমাত্র দৃশ্যমান আইটেমগুলি রেন্ডার করতে হবে।
  • ডায়নামিক বা বড় ডেটাসেট যা একটি দিকে স্ক্রল করে।

FlexBox

✅

✅

✅

✅

✅

✅

❌

  • লেআউটের জন্য অ্যাডাপ্টিভ ক্ষমতার প্রয়োজন, যেমন প্রাথমিক সাইজ নির্দিষ্ট করা, ডায়নামিক আইটেম বৃদ্ধি/হ্রাস (grow/shrink), ভিজ্যুয়াল রিঅর্ডারিং (order) বা আইটেম-লেভেল ক্রস-অ্যাক্সিস অ্যালাইনমেন্ট (alignSelf)।
  • বিভিন্ন সাইজের আইটেম সাজানো হচ্ছে।

নিচের সারণীতে Grid এবং অন্যান্য একই ধরনের কম্পোজেবলের ক্ষমতার সংক্ষিপ্ত বিবরণ দেওয়া হল:

কন্টেনার

কঠোর 2D অ্যালাইনমেন্ট

আইটেম স্প্যানিং (কলাম)

আইটেম স্প্যানিং (সারি)

ধীরে ধীরে লোড করা

এগুলির জন্য সেরা:

গ্রিড

✅

✅ (GridArea-এর মাধ্যমে)

✅

❌

  • স্ট্রাকচারাল টু-ডাইমেনশনাল লেআউট যেখানে সব আইটেম স্ক্রিনে থাকে এবং স্পষ্ট হরাইজন্টাল ও ভার্টিক্যাল অ্যালাইনমেন্টের প্রয়োজন হয়।
  • স্ক্রিনের সাইজ অনুযায়ী লেআউট অ্যাডাপ্টিভভাবে রিস্ট্রাকচার করা।

LazyVerticalGrid

✅

✅ (span-এর মাধ্যমে)

❌

✅

  • উল্লম্বভাবে স্ক্রল করা ফিড এবং বড় ক্যাটালগের জন্য কলাম প্রয়োজন।

LazyStaggeredGrid

❌ (শুধু ১D)

আংশিক (শুধুমাত্র সম্পূর্ণ স্প্যান)

❌

✅

  • মিক্সড-হাইট আইটেম সহ ফিড স্ক্রল করা।

LazyHorizontalGrid

✅

❌

✅

✅

  • অনুভূমিকভাবে স্ক্রল করা যায় এমন ক্যারোজেল বা একাধিক সারি সহ পৃষ্ঠাভিত্তিক ডেটা।

সারি ও কলাম একত্রিত করা

❌

❌

❌

❌

  • সহজ কম্পোনেন্ট অ্যাসেম্বলি, যেমন কোনও আইকনের পাশে টেক্সট লেবেল রাখা।