এই রেসিপি দেখায় যে কীভাবে Grid API প্রথাগত নেস্টেড স্ট্রাকচারের তুলনায় কোড রিডেবিলিটি উন্নত করে। অটোমেটিক সাইজ করা ট্র্যাক কনফিগার করার মাধ্যমে, আপনি এমন একটি গ্রিড তৈরি করতে পারেন যা আপনার টেক্সট কম্পোজেবলের অন্তর্নিহিত আকারের উপর ভিত্তি করে সেল প্রস্থ এবং উচ্চতার সাথে ডাইনামিকভাবে মানিয়ে নেয়।
এই রেসিপিতে, আপনি Grid API ব্যবহার করে একটি টেবিল তৈরি করবেন।
| লেআউট | ধীরে ধীরে লোড করা | সফ্ট র্যাপ | ডায়নামিক লেআউট আপডেট | |
|---|---|---|---|---|
FlexBox |
১ দিন | না | হ্যাঁ | হ্যাঁ |
Grid |
2D | না | না | হ্যাঁ |
পেশাদার পদ্ধতি
টেবিল আরও সহজে পড়তে ও ম্যানেজ করতে Grid কম্পোজেবল ব্যবহার করুন। Grid আপনাকে কলামের মাপ এবং সমস্ত সারি জুড়ে অ্যালাইনমেন্টের উপর সুনির্দিষ্ট নিয়ন্ত্রণ দেয়, যার ফলে আপনাকে ম্যানুয়ালি প্রস্থ সিঙ্ক্রোনাইজ করতে হয় না।
উপাদান
Grid: একটি কম্পোজেবল লেআউট যা আইটেমগুলিকে একটি দ্বি-মাত্রিক গ্রিডে রাখে। লেআউট কনফিগারেশনconfigল্যাম্বডা প্যারামিটারের মধ্যে নির্দিষ্ট করা থাকে, যেখানে UI কন্টেন্ট আইটেমcontentল্যাম্বডা প্যারামিটারের মধ্যে ঘোষণা করা হয়।GridTrackSize.Auto: কন্টেন্টের অন্তর্নিহিত সাইজের উপর ভিত্তি করে গ্রিড কনফিগারেশনের মধ্যে অটোমেটিক ট্র্যাক সাইজিং নির্দিষ্ট করে, যেমন,column(GridTrackSize.Auto)এবংrow(GridTrackSize.Auto)।gap():GridConfigurationScope-এর মধ্যে সারি ও কলামের স্পেসিং কনফিগার করে, যেমনgap(row = 8.dp, column = 16.dp)।
ধাপ
সব আইটেমের জন্য অটোমেটিক কলাম অ্যালাইনমেন্ট ও ট্র্যাক সাইজিং সহ
সিঙ্গেল Grid লেআউট ব্যবহার করে মাল্টি-কলাম তুলনা টেবিল তৈরি করুন।
১. ট্র্যাকের সাইজ নির্ধারণ করতে গ্রিডের সারি ও কলাম গণনা করুন
প্রথমে, ট্র্যাকের সাইজ নির্ধারণ করতে কলাম ও সারির সংখ্যা গণনা করুন:
- কলাম: আপনি যতগুলি অ্যাট্রিবিউট তুলনা করছেন, তার সংখ্যা এবং আইটেমের নামের জন্য একটি কলাম।
- সারি: আপনি যতগুলি আইটেম তুলনা করছেন, তার সাথে একটি হেডার সারি।
চারটি অ্যাট্রিবিউট জুড়ে দুটি কম্পোনেন্ট (FlexBox এবং Grid) তুলনা করার এই রেসিপির জন্য, আপনার পাঁচটি কলাম এবং তিনটি সারি প্রয়োজন।
২. গ্রিড ব্যবহার করে তুলনামূলক টেবিল প্রয়োগ করুন
একটি TableInGrid কম্পোজেবল তৈরি করুন যা আপনার টেবিল আইটেমগুলি সাজাতে Grid ব্যবহার করে। ট্র্যাকের সাইজ নির্ধারণ করতে config ল্যাম্বডার মধ্যে column এবং row ফাংশন কল করুন এবং gap()-এর সাহায্যে সেল স্পেসিং সেট করুন। টেক্সটের নিজস্ব সাইজ আছে বলে, GridTrackSize.Auto কন্টেন্ট ফিট করার জন্য কলাম ও সারির সাইজ অটোমেটিক সেট করে।
content ল্যাম্বডার মধ্যে আপনার টেবিল হেডার ও ডেটা রাখুন। Grid অটোমেটিক সব সেলের প্লেসমেন্ট ও অ্যালাইনমেন্ট ম্যানেজ করে:
@Composable fun TableInGrid( modifier: Modifier = Modifier, ) { Grid( config = { column(GridTrackSize.Auto) column(GridTrackSize.Auto) column(GridTrackSize.Auto) column(GridTrackSize.Auto) column(GridTrackSize.Auto) row(GridTrackSize.Auto) row(GridTrackSize.Auto) row(GridTrackSize.Auto) gap(row = 8.dp, column = 16.dp) }, modifier = modifier, ) { // Table Header Text(text = "", fontWeight = FontWeight.Bold) Text(text = "Layout", fontWeight = FontWeight.Bold) Text(text = "Lazy loading", fontWeight = FontWeight.Bold) Text(text = "Soft wrap", fontWeight = FontWeight.Bold) Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold) // FlexBox Row Text(text = "FlexBox", fontWeight = FontWeight.Bold) Text(text = "1D") Text(text = "No") Text(text = "Yes") Text(text = "Yes") // Grid Row Text(text = "Grid", fontWeight = FontWeight.Bold) Text(text = "2D") Text(text = "No") Text(text = "No") Text(text = "Yes") } }
ফলাফল
আপনি এখন অটোমেটিক কলাম অ্যালাইনমেন্ট এবং সেলস্পেসিং সহ একটি পরিষ্কার, দ্বি-মাত্রিক তুলনা টেবিল তৈরি করেছেন।
Grid ব্যবহার করে তুলনামূলক টেবিল।