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+

เพียงผ่านความกว้างขั้นต่ำที่เซลล์กริดควรมีและระยะห่างระหว่างพวกเขาและมันจะปรับขึ้นอยู่กับความกว้างที่มีอยู่

ดังนั้นการเขียนสิ่งนี้:

จะให้สิ่งนี้แก่คุณ:

นอกจากนี้ยังปรับได้อย่างถูกต้องเมื่ออุปกรณ์หมุน:

- ภาพรวมการใช้งาน

นึกถึงกริดในทางของ ความกว้างขั้นต่ำ ที่คุณต้องการให้เซลล์ของคุณเป็น ด้วยวิธีนี้มันง่ายที่จะปรับให้เข้ากับพื้นที่ที่มีอยู่ ขนาดอื่น ๆ ที่คุณต้องให้คือ ระยะห่าง ระหว่างเซลล์

ในการสร้างกริดเราจำเป็นต้องรู้ จำนวนรายการ จากนั้นตัวสร้างมุมมอง เนื้อหา จะถูกเรียกใช้กับแต่ละ ดัชนี และ cellwidth ที่คุณสามารถส่งผ่านไปยังเฟรมของสิ่งที่คุณต้องการแสดงภายใน

- ปรับขนาดมุมมองของคุณภายในเซลล์

กริดจะห่อแต่ละรายการที่คุณให้ไว้ในมุมมองที่ได้รับการตั้งค่า cellwidth เป็น ความกว้าง ไม่มีข้อจำกัดความสูงอยู่ในเซลล์ นั่นคือเพื่อให้คุณสามารถปรับขนาดเนื้อหาของคุณให้ยืดหยุ่นที่สุดเท่าที่จะทำได้ นี่เป็นเพียงตัวอย่างสองสามตัวอย่างที่คุณสามารถทำได้

ความสูงที่กำหนดโดยเนื้อหา

 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