গ্রিড

Grid হলো একটি জেটপ্যাক কম্পোজ এপিআই যা আপনাকে নমনীয়ভাবে একটি দ্বি-মাত্রিক লেআউট বাস্তবায়ন করতে দেয়। এই এপিআই ব্যবহার করে, আপনি উপলব্ধ কন্টেইনারের আকারের সাথে মানিয়ে নিয়ে আইটেমগুলোকে বহু-কলাম বা বহু-সারি লেআউটে প্রদর্শন করতে পারেন।

গ্রিড সহ একটি নমনীয় এবং অভিযোজনযোগ্য দ্বি-মাত্রিক বিন্যাস
চিত্র ১. Grid সহ একটি নমনীয় এবং অভিযোজনযোগ্য দ্বি-মাত্রিক বিন্যাস।

একই ধরনের কম্পোজেবলগুলো থেকে গ্রিড কীভাবে আলাদা?

Compose-এ ইতিমধ্যেই LazyVerticalGrid মতো একই ধরনের কম্পোনেন্ট রয়েছে। এই কম্পোনেন্টগুলো মূলত বড় ও সমজাতীয় ডেটা সেটের ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়— যেমন, একটি ভিডিও স্ট্রিমিং অ্যাপে কন্টেন্ট ক্যাটালগ প্রদর্শন করা। এই কম্পোনেন্টগুলো কোনো স্ক্রিনের কাঠামোগত লেআউট বা জটিল কম্পোনেন্টের জন্য ডিজাইন করা হয়নি।

আপনি একাধিক Row এবং Column কম্পোজেবল একত্রিত করে একটি দ্বি-মাত্রিক লেআউটও বাস্তবায়ন করতে পারেন। তবে, এই পদ্ধতির কিছু অসুবিধা রয়েছে, যেমন গভীর স্তরবিন্যাস এবং অভিযোজনযোগ্যতার অসুবিধা।

নিম্নলিখিত সারণিতে প্রতিটি এপিআই-এর জন্য কোন লেআউটগুলি উপযুক্ত তার একটি সংক্ষিপ্ত বিবরণ দেওয়া হয়েছে:

উপাদান উদ্দেশ্য
LazyVerticalGrid , LazyStaggeredGrid , LazyHorizontalGrid বৃহৎ ও সমজাতীয় ডেটা সেটের ভিজ্যুয়ালাইজেশন, যার জন্য লেজি লোডিং প্রয়োজন।
Row , Column , FlexBox একমাত্রিক বিন্যাস
Grid দ্বিমাত্রিক বিন্যাস

পরিভাষা

Grid কীভাবে কাজ করে তা বোঝার জন্য নিম্নলিখিত পরিভাষাগুলোর সাথে পরিচিত হন।

গ্রিড লাইন

একটি গ্রিড কয়েকটি রেখা দিয়ে গঠিত, যেগুলো আনুভূমিক এবং উল্লম্বভাবে চলে। যদি আপনার গ্রিডে তিনটি সারি থাকে, তবে শেষ সারির পরেরটি সহ এতে চারটি আনুভূমিক রেখা থাকে। নিচের ছবিতে, প্রতিটি ডটেড লাইন একটি গ্রিড লাইনকে নির্দেশ করে:

গ্রিডটি চারটি অনুভূমিক রেখা এবং তিনটি উল্লম্ব রেখা নিয়ে গঠিত।
চিত্র ২। গ্রিডটি চারটি অনুভূমিক রেখা এবং তিনটি উল্লম্ব রেখা নিয়ে গঠিত।

গ্রিড ট্র্যাক

একটি গ্রিড ট্র্যাক হলো দুটি গ্রিড লাইনের মধ্যবর্তী স্থান। একটি সারি ট্র্যাক দুটি অনুভূমিক লাইনের মধ্যে থাকে এবং একটি কলাম ট্র্যাক দুটি উল্লম্ব লাইনের মধ্যে থাকে। এই ট্র্যাকগুলির আকার নির্ধারণ করতে, গ্রিড তৈরি করার সময় সেগুলির জন্য একটি আকার নির্ধারণ করে দিন।

প্রথম সারির জন্য একটি গ্রিড ট্র্যাক।
চিত্র ৩। প্রথম সারির জন্য একটি গ্রিড ট্র্যাক।

গ্রিড সেল

একটি গ্রিড সেল হলো একটি সারি এবং একটি কলাম ট্র্যাকের ছেদবিন্দু।

একটি গ্রিড সেল যা দ্বিতীয় সারি এবং দ্বিতীয় কলামের ছেদবিন্দু।
চিত্র ৪। একটি গ্রিড সেল যা দ্বিতীয় সারি এবং দ্বিতীয় কলামের ছেদবিন্দু।

গ্রিড এলাকা

একটি গ্রিড এলাকা একাধিক গ্রিড সেল নিয়ে গঠিত। আপনি একটি আইটেমকে একাধিক ট্র্যাক জুড়ে বিস্তৃত করে একটি গ্রিড এলাকা নির্ধারণ করতে পারেন।

একটি গ্রিড এলাকা যা চারটি গ্রিড সেল নিয়ে গঠিত।
চিত্র ৫। একটি গ্রিড এলাকা যা চারটি গ্রিড সেল নিয়ে গঠিত।

গ্রিড ফাঁক

গ্রিড গ্যাপ হলো গ্রিড ট্র্যাকগুলোর মধ্যবর্তী ফাঁকা স্থান। আপনি এই ফাঁকা স্থানের মধ্যে কোনো UI এলিমেন্ট স্থাপন করতে পারবেন না, কিন্তু এর উপর দিয়ে একটি UI এলিমেন্টকে বিস্তৃত করতে পারবেন।

প্রথম কলাম এবং দ্বিতীয় কলামের মধ্যে একটি গ্রিড ফাঁক।
চিত্র ৬। প্রথম স্তম্ভ এবং দ্বিতীয় স্তম্ভের মধ্যে একটি গ্রিড ফাঁক।