এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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 : কম্পোজ Modifier এক্সটেনশন যা একটি Grid অভ্যন্তরে কোনো নির্দিষ্ট সেল বা নামযুক্ত এলাকায় একটি চাইল্ড UI এলিমেন্ট নির্ধারণ করে।

পদক্ষেপ

সিমান্টিক এরিয়া আইডেন্টিফায়ার নির্ধারণ করে, লেজি লিস্ট কম্প্যাটিবিলিটির জন্য 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)
}GridByExamples.kt

২. গ্রিডে স্থির উপাদানগুলো রাখুন।

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

৩. কন্টেন্ট এরিয়াতে লেজি কলাম (LazyColumn) এমবেড করুন।

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

  )     

            }@Composable >fun GridWithLazyColumn( modifier: Modifier = Modifier, items: List<String> = emptyList(), class="devsite-syntax-w"> { 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)) } } } class="devsite-github-link nocode no-select nocontent">GridByExamples.kt

ফলাফল

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

অতিরিক্ত সম্পদ

সর্বোত্তম অনুশীলন

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

উপকরণ

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

পদক্ষেপ

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

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)
}GridByExamples.kt

২. গ্রিডে স্থির উপাদানগুলো রাখুন।

৩. কন্টেন্ট এরিয়াতে লেজি কলাম (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))
            }
        }
    }
}GridByExamples.kt

ফলাফল

অতিরিক্ত সম্পদ

সর্বোত্তম অনুশীলন

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

উপকরণ

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

পদক্ষেপ

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

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)
}GridByExamples.kt

২. গ্রিডে স্থির উপাদানগুলো রাখুন।

৩. কন্টেন্ট এরিয়াতে লেজি কলাম (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))
            }
        }
    }
}GridByExamples.kt

ফলাফল

অতিরিক্ত সম্পদ

সর্বোত্তম অনুশীলন

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

উপকরণ

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

পদক্ষেপ

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

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)
}GridByExamples.kt

২. গ্রিডে স্থির উপাদানগুলো রাখুন।

৩. কন্টেন্ট এরিয়াতে লেজি কলাম (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))
            }
        }
    }
}GridByExamples.kt