ما هو تخطيط الشبكة؟
عند تطوير واجهة تطبيق ، غالبًا ما نتعامل مع تمثيل ثنائي الأبعاد للعناصر المرئية. هناك العديد من عناصر التحكم المصممة لتوحيد التخطيط وتبسيطه. فيما يتعلق بمفاهيم تطوير الويب ، اقترحت مجموعة عمل CSS تخطيط الشبكة في عام 2017 كأفضل طريقة لإنشاء قوالب واجهة مستخدم ثنائية الأبعاد.
في iOS 13 SDK ، لدينا القدرة على ترتيب العناصر خطيًا VStack و HStack و ZStack ، في شكل قائمة: List. ولكن لا توجد طريقة لتحديد دلالات ترتيب العناصر في نظام إحداثيات ثنائي الأبعاد. لذلك قررنا أن ننشئها بأنفسنا.
في نظام التشغيل iOS 14 ، قدمت Apple تطبيق الشبكة الخاص بها ، والذي سنناقشه أدناه في قسم Apple LazyVGrid / LazyHGrid.
أمثلة على الواجهات مع تخطيط الشبكة
grid . , . Grid, UICollectionView, .
, Grid Layout
Timetable
, , . grid , . Spans grid item .
, .
, , . , — . Grid Layout , grid flow .rows .columns.
grid:
grid , , . , .
, , tracks. . , , .
Grid, . .
, , , . .
, : .
, . , , . grid (dense) .
Grid , , . scroll fill.
.
, , .
ExyteGrid — Grid, SwiftUI. , ExyteGrid:
- Strava
, grid. Grid. , , spans .
iOS
iOS? , grid, grid item. ExyteGrid layout, . SwiftUI grid.
Apple LazyVGrid/LazyHGrid
Apple LazyVGrid LazyVGrid iOS 14, ExyteGrid :
- Apple span . / .
- grid: / .
- ExyteGrid (grid packing): sparse, dense, , , .
- Apple Grid fade , ForEach. ExyteGrid , ID grid. ID GridGroup ForEach, SwiftUI (transition) .
- . Flexible Apple Grid , , .fr ExyteGrid .
- .adaptive Apple Grid .fit . Adaptive . , . Fit ExyteGrid , , .
- ExyteGrid gridCellOverlay gridCellBackground, custom view , . .
- Apple Grid , , ExyteGrid .
- يحتوي ExyteGrid على وضع المحتوى: ملء حيث ترتب الشبكة العناصر لتعبئة عرض الحاوية دون الحاجة إلى حساب حجم كل عنصر يدويًا.
مفاهيم هذين التطبيقين متشابهة إلى حد ما ، ولكنها تختلف أيضًا في نواح كثيرة. يوجد على جانب Apple Grid تطبيق أصلي ، يركز على عدد كبير من العناصر ، وعلى جانب ExyteGrid - المزيد من الوظائف وكود مفتوح المصدر ، يمكن لأي شخص المشاركة في تطويره.
سعيد برؤيتك كمستخدمين ومساهمين في مستودع مكتبة ExyteGrid .
بالطبع ، لا تزال هناك قائمة بالميزات التي لم يتم تنفيذها بعد في قسم خارطة الطريق .