গ্রিডে লেজি লিস্ট

চার স্টার রেটিং আইকন

Grid কম্পোজেবল স্ট্রাকচারাল, দ্বি-মাত্রিক স্ক্রিন লেআউট তৈরি করে। Grid আপনার UI-এর ফাউন্ডেশনাল আর্কিটেকচার হিসেবে স্পষ্টভাবে সংজ্ঞায়িত ট্র্যাক (সারি ও কলাম) ও গ্যাপ ব্যবহার করে রেসপন্সিভ লেআউট স্ট্রাকচার সংজ্ঞায়িত করে।

যেহেতু Grid হল একটি স্ট্রাকচারাল কন্টেনার, ধীরে ধীরে লোড করা কন্টেনার নয়, তাই স্ক্রল করার সময় আইটেম রিসাইকেল না করে আপনাকে এর মধ্যে রাখা প্রতিটি এলিমেন্ট স্পষ্টভাবে সংজ্ঞায়িত করতে হবে। এর ফলে, Grid-এর মধ্যে সরাসরি বড় বা ডায়নামিক ডেটাসেট রেন্ডার করলে পারফর্ম্যান্সের ক্ষেত্রে সমস্যা হতে পারে, কারণ সব আইটেম একসাথে কম্পোজ হয়।

স্ট্রাকচার্ড স্ক্রিন লেআউটের মধ্যে ডেটার বড় কালেকশন দেখাতে, আপনার Grid সেলে LazyColumn বা LazyRow-এর মতো লেজি কম্পোনেন্ট এম্বেড করুন। তবে মনে রাখবেন: ফ্লেক্সিবল ট্র্যাক (1.fr-এর মতো স্পেসিফিকেশন সহ) চাইল্ড এলিমেন্টের ইন্ট্রিনসিক সাইজ কোয়েরি করে। SubcomposeLayout-এ অন্তর্নিহিত পরিমাপ পাস করার সুবিধা নেই, তাই ফ্লেক্সিবল ট্র্যাকে লেজি লিস্ট রাখলে IllegalStateException ক্র্যাশ করে। ফ্লেক্সিবল গ্রিড ট্র্যাকের মধ্যে লেজি লিস্ট নিরাপদে রাখতে, আপনাকে অবশ্যই GridTrackSize.MinMax সাইজ (যেমন minmax(0.dp, 1.fr)) ব্যবহার করতে হবে যাতে ইন্ট্রিনসিক মেজারমেন্ট পাস বাইপাস করা যায়।

স্ক্রিন লেআউটে উপরে হেডার, প্রধান কন্টেন্ট এরিয়াতে স্ক্রল করা যায় এমন আইটেমের তালিকা এবং নিচে ফুটার থাকে।
ছবি ১. হেডার, ফুটার ও কন্টেন্টের জন্য এম্বেড করা LazyColumn সহ স্ট্রাকচারাল স্ক্রিন লেআউট।

পেশাদার পদ্ধতি

  • বড় এক্সপ্লিসিট লুপের পরিবর্তে লেজি লিস্ট ব্যবহার করুন: স্ট্রাকচার্ড Grid-এর মধ্যে বড় বা ডায়নামিক ডেটাসেট দেখাতে, আইটেমের উপর বড় এক্সপ্লিসিট লুপ তৈরি করার পরিবর্তে নির্দিষ্ট গ্রিড সেলের মধ্যে লেজি কম্পোনেন্ট (সাধারণত LazyColumn বা LazyRow) এম্বেড করুন, কারণ Grid আইটেম রিসাইকেল করে না এবং এতে ১০০০ ট্র্যাকের সীমা আছে।
  • লেজি লিস্টের জন্য MinMax ট্র্যাক সাইজিং ব্যবহার করুন: কারণ LazyColumn এবং LazyRow ইন্ট্রিনসিক মেজারমেন্ট পাস (SubcomposeLayout দেখুন) সাপোর্ট করে না, ইন্ট্রিনসিক মেজারমেন্ট নিরাপদে বাইপাস করতে লেজি কম্পোনেন্ট হোস্ট করা ফ্লেক্সিবল ট্র্যাকে GridTrackSize.MinMax ব্যবহার করুন।

উপাদান

  • Grid: কম্পোজেবল লেআউট যা আইটেমগুলিকে একটি দ্বি-মাত্রিক গ্রিড কাঠামোতে রাখে যা স্পষ্ট সারি এবং কলাম ট্র্যাক ব্যবহার করে কনফিগার করা হয়।
  • LazyColumn: উল্লম্বভাবে স্ক্রল করা তালিকা যা শুধুমাত্র স্ক্রিনে বর্তমানে দেখা যাচ্ছে এমন আইটেম কম্পোজ ও রিসাইকেল করে।
  • GridTrackSize.MinMax: ট্র্যাক সাইজিং প্রপার্টি যা রানটাইম পরিমাপ ক্র্যাশ ট্রিগার না করে নিরাপদে লেজি কম্পোনেন্ট হোস্ট করার জন্য নমনীয় সীমা (min এবং max) সংজ্ঞায়িত করে।
  • gridItem: Compose Modifier এক্সটেনশন যা একটি চাইল্ড UI এলিমেন্টকে একটি নির্দিষ্ট সেল বা Grid-এর মধ্যে নামযুক্ত এলাকায় অ্যাসাইন করে।

ধাপ

সিম্যান্টিক এরিয়া আইডেন্টিফায়ার নির্ধারণ করে, লেজি লিস্ট কম্প্যাটিবিলিটির জন্য minmax সাইজ সহ গ্রিড ট্র্যাক কনফিগার করে এবং গ্রিড কন্টেন্ট এরিয়ার মধ্যে LazyColumn এম্বেড করে আপনার স্ক্রিন লেআউট স্ট্রাকচার করুন।

১. গ্রিড ট্র্যাক এবং নামযুক্ত এলাকা কনফিগার করুন

আপনার স্ক্রিন লেআউটের স্বতন্ত্র অঞ্চলগুলি উপস্থাপন করতে একটি enum ক্লাস তৈরি করুন, এবং আপনার লেআউট ট্র্যাক এবং নামযুক্ত এলাকার জন্য একটি GridConfigurationScope ল্যাম্বডা সংজ্ঞায়িত করুন। হেডার ও ফুটার সারির জন্য GridTrackSize.MaxContent ব্যবহার করুন যাতে তাদের কন্টেন্টের ডাইমেনশন ফিট হয় এবং কন্টেন্ট ট্র্যাক হোস্টিংয়ের জন্য minmax(0.dp, 1.fr) ব্যবহার করুন যাতে অলস তালিকাটি নমনীয় স্থান বরাদ্দ করতে পারে, অসমর্থিত অন্তর্নিহিত পরিমাপের কোয়েরি না করে:

enum class ScreenArea {
    Header,
    Content,
    Footer
}


val lazyConfig: GridConfigurationScope.() -> Unit = {
    column(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)
    row(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)

    area(ScreenArea.Header, row = 1, column = 1)
    area(ScreenArea.Content, row = 2, column = 1)
    area(ScreenArea.Footer, row = 3, column = 1)
    gap(8.dp)
}

২. গ্রিডে স্ট্যাটিক কম্পোনেন্ট যোগ করুন

আপনার কম্পোজেবলে, Grid কন্টেনারে lazyConfig পাস করুন। content ল্যাম্বডার মধ্যে, স্ট্যাটিক কম্পোনেন্ট (Header এবং Footer) রাখুন এবং তাদের সংশ্লিষ্ট এরিয়া আইডেন্টিফায়ার সহ Modifier.gridItem() ব্যবহার করে তাদের পজিশন করুন।

৩. কন্টেন্ট এরিয়াতে LazyColumn এম্বেড করুন

কন্টেন্ট সেলে, Modifier.gridItem(ScreenArea.Content) ব্যবহার করে LazyColumn এম্বেড করুন। ধাপ ১-এ কন্টেন্ট ট্র্যাক minmax(0.dp, 1.fr)-এর সাথে কনফিগার করা হয়েছে বলে, LazyColumn নিরাপদে আইটেম পরিমাপ ও রিসাইকেল করতে পারে, এর জন্য স্ক্রল করার সময় অসমর্থিত ইন্ট্রিনসিক ডাইমেনশন কোয়েরি করতে হয় না:

@Composable
fun GridWithLazyColumn(
    modifier: Modifier = Modifier,
    items: List<String> = emptyList(),
) {
    Grid(
        modifier = modifier.fillMaxSize(),
        config = lazyConfig
    ) {
        Text("Header", Modifier.gridItem(ScreenArea.Header).padding(16.dp))
        Text("Footer", Modifier.gridItem(ScreenArea.Footer).padding(16.dp))

        // LazyColumn placed in the content area for large datasets
        LazyColumn(
            modifier = Modifier
                .gridItem(ScreenArea.Content)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Text(item, Modifier.padding(16.dp))
            }
        }
    }
}

ফলাফল

আপনার স্ক্রিন লেআউট এখন সামগ্রিক দ্বিমাত্রিক পৃষ্ঠার গঠন নির্ধারণ করতে Grid API ব্যবহার করে, যেখানে একটি LazyColumn-কে minmax সাইজের একটি ফ্লেক্সিবল ট্র্যাকে এম্বেড করা হয় যাতে তালিকার আইটেমগুলি দক্ষতার সাথে রিসাইকেল করা যায় এবং রানটাইম ব্যতিক্রম এড়ানো যায়।

অতিরিক্ত রিসোর্স