আইটেমের বৈশিষ্ট্য সেট করুন

যদিও Grid কনফিগ সামগ্রিক কাঠামোটি নির্ধারণ করে, সেই কাঠামোর মধ্যে থাকা আইটেমগুলোর অবস্থান, বিস্তৃতি এবং সারিবদ্ধতা নিয়ন্ত্রণ করতে আপনি gridItem মডিফায়ার ব্যবহার করেন।

আইটেমের অবস্থান সেট করুন

row এবং column প্যারামিটার ব্যবহার করে একটি নির্দিষ্ট ট্র্যাক বা সেলে কোনো আইটেম রাখুন।

row এবং column প্যারামিটারগুলো সেই রো এবং কলাম ট্র্যাক ইনডেক্স নির্দিষ্ট করে যেখানে আইটেমটি স্থাপন করা হবে। ট্র্যাক ইনডেক্সগুলো ১-ভিত্তিক—এগুলো এক থেকে শুরু হয়। শুধুমাত্র row অথবা column (উভয়ই নয়) নির্দিষ্ট করলে আইটেমটি সেই ট্র্যাকের পরবর্তী উপলব্ধ স্থানে স্থাপন করা হয়। উভয়ই নির্দিষ্ট করলে আইটেমটি সেই সেলে স্থাপন করা হয়।

শুরু থেকে ট্র্যাক সূচক নির্দিষ্ট করতে একটি ধনাত্মক পূর্ণসংখ্যা ব্যবহার করুন। উদাহরণস্বরূপ, প্রথম সারি এবং কলামে একটি আইটেম রাখতে, gridItem(row = 1, column = 1) ব্যবহার করুন।

শেষের সাপেক্ষে ট্র্যাক নির্দিষ্ট করতে একটি ঋণাত্মক পূর্ণসংখ্যা ব্যবহার করুন। উদাহরণস্বরূপ, শেষের আগের সারি এবং কলামে একটি আইটেম রাখতে, gridItem(row = -2, column = -2) ব্যবহার করুন।

নিম্নলিখিত উদাহরণে, কার্ড #২ দ্বিতীয় সারি এবং দ্বিতীয় কলামে রাখা হয়েছে। কার্ড #৩-কে শেষ সারিতে (যার সূচি -১) বরাদ্দ করা হয়েছে, যেখানে এটি স্বয়ংক্রিয়ভাবে সেই ট্র্যাকের প্রথম উপলব্ধ কলামটি দখল করে (চিত্র ১)। 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

কার্ড নং ২ গ্রিড সেলে রাখা হয় দ্বিতীয় সারি এবং দ্বিতীয় কলামে, এবং কার্ড নং ৩ প্রথম কলামে তৃতীয় সারিতে রাখা হয়।
চিত্র ১। কার্ড নং ২ দ্বিতীয় সারি ও দ্বিতীয় কলামের গ্রিড সেলে রাখা হয়েছে এবং কার্ড নং ৩ তৃতীয় সারির প্রথম কলামে রাখা হয়েছে।

সারি এবং কলাম প্রসারিত করুন

একটি আইটেমকে একাধিক সেলের উপর বিস্তৃত করতে rowSpan এবং columnSpan প্যারামিটার ব্যবহার করুন। আপনি একটি UI এলিমেন্টকে একটি গ্রিড এরিয়ার মধ্যে রাখতে পারেন, যা কয়েকটি গ্রিড সেল নিয়ে গঠিত একটি এলাকা। gridItem মডিফায়ারটি আপনাকে rowSpan এবং columnSpan প্যারামিটার ব্যবহার করে গ্রিড এরিয়া নির্দিষ্ট করার সুযোগ দেয়। নিচের উদাহরণে, কার্ড #১ দুটি সারি এবং দুটি কলাম নিয়ে গঠিত এরিয়াটিতে রাখা হয়েছে (চিত্র ২)। 

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

কার্ড নং ৪ তিনটি কলাম জুড়ে বিস্তৃত।
চিত্র ২। কার্ড নং ৪ তিনটি কলাম জুড়ে বিস্তৃত।

একটি গ্রিড এলাকায় অ্যালাইনমেন্ট সেট করুন

আপনি gridItem মডিফায়ারের alignment প্যারামিটারে UI এলিমেন্টের অ্যালাইনমেন্ট নির্দিষ্ট করে একটি গ্রিড এরিয়ার মধ্যে তার অ্যালাইনমেন্ট ঠিক করতে পারেন। নিচের উদাহরণে, #1-কে দুটি কলাম এবং দুটি সারি নিয়ে গঠিত গ্রিড এরিয়ার কেন্দ্রে স্থাপন করা হয়েছে। 

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

#১ যুক্ত লেখাটি দুটি সারি এবং দুটি কলাম নিয়ে গঠিত গ্রিড এলাকার কেন্দ্রে স্থাপন করা হয়েছে।
চিত্র ৩। #১ যুক্ত লেখাটি দুটি সারি এবং দুটি কলাম নিয়ে গঠিত গ্রিড এলাকার কেন্দ্রে স্থাপন করা হয়েছে।

স্বয়ংক্রিয় স্থাপন এবং স্থাপিত আইটেমগুলির মিশ্রণ

Grid যে UI এলিমেন্টের কোনো অবস্থান নির্দিষ্ট করা নেই, সেটি স্বয়ংক্রিয়ভাবে স্থাপিত হয়। এই উদাহরণটি দেখায় কিভাবে আপনি স্বয়ংক্রিয়ভাবে স্থাপিত এলিমেন্ট এবং নির্দিষ্ট গ্রিড সেলযুক্ত UI এলিমেন্টগুলোকে একসাথে ব্যবহার করতে পারেন। কার্ড #২ এবং কার্ড #৪ হলো নির্দিষ্ট গ্রিড সেল, এবং বাকি আইটেমগুলো স্বয়ংক্রিয়ভাবে স্থাপিত। 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt

কার্ড #৩ কে কার্ড #১ এর পাশে রাখা হয়, কারণ এটি একটি স্বয়ংক্রিয় স্থান নির্ধারণ।
চিত্র ৪। কার্ড নং ৩, কার্ড নং ১- এর পাশে রাখা হয়েছে, কারণ এটি একটি স্বয়ংক্রিয় স্থাপন।
পূর্ববর্তী
কন্টেইনারের বৈশিষ্ট্য সেট করুন
পরবর্তী
ফোল্ডেবল সম্পর্কে জানুন