حاويات التصميم

يوفّر Jetpack Compose العديد من حاويات التنسيق لمساعدتك في تنظيم مكوّنات واجهة المستخدم وترتيبها. على الرغم من أنّ الدوال المركّبة الأساسية للتنسيق، مثل Row وColumn، تعالج الترتيبات البسيطة، تتطلّب العديد من التطبيقات حلولاً أكثر استجابةً وتكيُّفًا للحاويات مع تغيُّر أحجام الشاشات وزيادة بيانات المستخدمين.

تتضمّن حاويات التنسيق ما يلي:

• القوائم والشبكات التي تستخدم التحميل الكسول: مكوّنات مثل LazyColumn وLazyRow وLazyVerticalGrid التي تعرض بكفاءة مجموعات بيانات كبيرة أو ذات حجم ديناميكي من خلال إنشاء وتنسيق العناصر المرئية حاليًا في إطار العرض فقط.
• التنقّل بين الصفحات: حاويات مثل HorizontalPager وVerticalPager تتيح للمستخدمين التمرير سريعًا أو التنقّل بين صفحات المحتوى
• تخطيطات التدفق: حاويات أحادية البُعد متجاوبة (FlowRow وFlowColumn) تلتف تلقائيًا حول العناصر الفائضة إلى الصف أو العمود التالي عند نفاد المساحة.
• الشبكة: هي بنية مرنة ثنائية الأبعاد تعرض العناصر في تنسيقات متعددة الأعمدة أو الصفوف تتكيّف مع حجم الحاوية.
• FlexBox: حاوية تكيُّفية مستوحاة من CSS Flexbox توفّر تحكّمًا دقيقًا في كيفية التفاف العناصر وتوسيعها وتقليصها ومحاذاتها على طول المحاور الرئيسية والمتقاطعة لملء المساحة المتاحة.

اختيار حاوية التنسيق الصحيحة

عند إنشاء التنسيقات في Compose، يعتمد الاختيار بين حاويات التنسيق الأساسية والأكثر تقدمًا على تصميمك، وما إذا كان يجب التفاف العناصر عندما تكون المساحة مقيدة، وكيفية تغيير حجم العناصر ديناميكيًا.

يلخّص الجدول التالي إمكانات كل حاوية من حاويات تنسيق Compose 1D:

الحاوية	التفاف العناصر إلى أسطر جديدة	النمو لكل سلعة	Per-item shrink	الحجم الأولي لكل عنصر	تتوسّع العناصر لملء المساحة المتاحة على أسطر متعددة	إعادة ترتيب العناصر	التحميل الكسول	يناسب هذا الخيار:
الصف / العمود	❌	✅ (عبر weight) سطر واحد فقط	❌	❌	❌	❌	❌	صفوف موحّدة تحتوي على عدد صغير وثابت من العناصر تتناسب العناصر مع الحدود المتاحة ولا تحتاج إلى الالتفاف عبر أسطر متعددة.
FlowRow / FlowColumn	✅	محدود	❌	❌	جزئية	❌	❌	تم استبداله بـ FlexBox.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	القوائم الطويلة أو اللانهائية من العناصر التي يجب عرض العناصر المرئية فقط لتحسين الأداء. مجموعات بيانات ديناميكية أو كبيرة يتم التنقّل فيها في اتجاه واحد
FlexBox	✅	✅	✅	✅	✅	✅	❌	التنسيقات التي تتطلّب إمكانات تكيُّفية، مثل تحديد الحجم الأولي أو زيادة حجم العناصر أو تقليصها ديناميكيًا (grow/shrink) أو إعادة الترتيب المرئي (order) أو المحاذاة على مستوى العناصر على مستوى المحور (alignSelf). ترتيب العناصر ذات الأحجام المختلفة

يلخّص الجدول التالي إمكانات Grid والدوال المركّبة الأخرى المشابهة:

الحاوية	التوافق الكامل مع الأبعاد الثنائية	امتداد العنصر (الأعمدة)	امتداد العنصر (الصفوف)	التحميل الكسول	يناسب هذا الخيار:
الشبكة	✅	✅ (عبر GridArea)	✅	❌	التنسيقات الهيكلية ثنائية الأبعاد التي تظهر فيها جميع العناصر على الشاشة، وتحتاج إلى محاذاة أفقية وعمودية واضحة. إعادة هيكلة التنسيقات بشكل تكيُّفي على مستوى أحجام الشاشات المختلفة
LazyVerticalGrid	✅	‫✅ (عبر span)	❌	✅	خلاصات التمرير العمودي والكتالوجات الكبيرة التي تتطلب أعمدة
LazyStaggeredGrid	❌ (يوم واحد فقط)	جزئي (الامتداد الكامل فقط)	❌	✅	خلاصات قابلة للتمرير مع عناصر ذات ارتفاعات مختلفة
LazyHorizontalGrid	✅	❌	✅	✅	لوحات عرض دوّارة للتمرير الأفقي أو بيانات مقسّمة على صفحات متعددة الصفوف
دمج الصفوف والأعمدة	❌	❌	❌	❌	تجميع المكونات البسيطة، مثل وضع تسمية نصية بجوار أيقونة.