GridStack

شبكية

عرض تخطيط الشبكة المرن لـ Swiftui.

تحديث WWDC20

أطلقت Apple  LazyVGrid و LazyHGrid في WWDC20.

إذا كنت بخير لدعم I (pad) OS 14 ، MacOS 11 ، TVOS 14 ، Watchos 7 على التوالي تلك ^-- هي بالتأكيد الطريق للذهاب.

إذا كنت ترغب في دعم I (pad) OS 13 ، MacOS 10.15 ، TVOS 13 ، و WatchOS 6 .

---

iOS 13+ ، MacOS 10.15+ ، TVOS 13+ ، ⌚ Watchos 6+

ما عليك سوى تمرير الحد الأدنى لعرض خلايا الشبكة والتباعد بينهما وسيتم ضبطه اعتمادًا على العرض المتاح.

لذا كتابة هذا:

سوف يعطيك هذا:

يضبط أيضًا بشكل صحيح عند تدوير الجهاز:

؟ نظرة عامة على الاستخدام

فكر في الشبكة في طريق الحد الأدنى للعرض الذي تريد أن تكون خلاياك. وبهذه الطريقة ، من السهل التكيف مع أي مساحة متوفرة. الحجم الآخر الوحيد الذي تحتاج إلى توفيره هو التباعد بين الخلايا.

لإنشاء الشبكة فعليًا ، نحتاج إلى معرفة عدد العناصر . بعد ذلك ، سيتم استدعاء منشئ عرض المحتوى مع كل فهرس وعرض الخلايا التي يمكنك بعد ذلك الانتقال إلى إطار كل ما تريد عرضه في الداخل.

؟ تحجيم وجهات نظرك داخل الخلايا

سوف تلتزم الشبكة كل عنصر تقدمه في طريقة عرض يحصل على عرض الخلايا الخلوية . لا يتم وضع قيود الارتفاع على الخلية. هذا بحيث يمكنك حجم المحتوى الخاص بك مرونة قدر الإمكان. فيما يلي مجرد أمثلة ما يمكنك القيام به.

الارتفاع المحدد بواسطة المحتوى

 GridStack ( ... ) { index , cellWidth in
    Text ( " ( index ) " )
        // Don't pass any height to the frame to let it be defined by it's content
        . frame ( width : cellWidth )
}

العناصر المربعة

 GridStack ( ... ) { index , cellWidth in
    Text ( " ( index ) " )
        // Pass the cellWidth as width and height to the frame to make a square
        . frame ( width : cellWidth , height : cellWidth )
}

عناصر نسبة العرض إلى الارتفاع

 GridStack ( ... ) { index , cellWidth in
    Text ( " ( index ) " )
        // Pass the cellWidth as width and a portion of it as height to get a certain aspect ratio
        . frame ( width : cellWidth , height : cellWidth * 0.75 )
} 

✍ التوقيع

 GridStack (
    minCellWidth : Length ,
    spacing : Length ,
    numItems : Int ,
    alignment : HorizontalAlignment = . leading ,
    content : ( index : Int , cellWidth : CGFloat ) - > Void
) 

يذكر

لقد أنشأت GridStack عن طريق أخذ الأفكار من FlowStack بواسطة John Susek.