GridStack

Gridstack

Tampilan tata letak grid yang fleksibel untuk SwiftUi.

Pembaruan WWDC20

Apple  Dirilis LazyVGrid dan LazyHGrid di WWDC20.

Jika Anda baik-baik saja hanya mendukung I (PAD) OS 14, MacOS 11, TVOS 14, WatchOS 7 masing- ^-- pasti adalah cara yang harus ditempuh.

Jika Anda ingin mendukung I (PAD) OS 13, MacOS 10.15, TVOS 13, WatchOS 6 terus membaca.

---

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

Cukup lulus lebar minimum yang harus dimiliki sel -sel grid dan jarak di antara mereka dan akan menyesuaikan tergantung pada lebar yang tersedia.

Jadi menulis ini:

akan memberimu ini:

Ini juga menyesuaikan dengan benar saat perangkat diputar:

? Tinjauan Penggunaan

Pikirkan kisi -kisi di jalan berapa lebar minimum yang Anda inginkan. Dengan begitu mudah untuk menyesuaikan diri dengan ruang yang tersedia. Satu -satunya ukuran lain yang perlu Anda berikan adalah jarak antar sel.

Untuk benar -benar membuat kisi, kita perlu mengetahui jumlah item . Kemudian pembangun tampilan konten akan dipanggil dengan masing -masing indeks dan sel yang kemudian Anda dapat berikan ke bingkai apa pun yang ingin Anda tampilkan di dalamnya.

? Ukuran pandangan Anda di dalam sel

Kisi akan membungkus setiap item yang Anda berikan dalam tampilan yang membuat selwidth set sebagai lebar . Tidak ada kendala tinggi yang diletakkan di sel. Itu agar Anda dapat mengukur konten Anda sefleksibel mungkin. Berikut adalah beberapa contoh apa yang dapat Anda lakukan.

Tinggi yang ditentukan oleh konten

 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 )
}

Item persegi

 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 )
}

Item rasio aspek

 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 )
} 

✍️ tanda tangan

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

Menyebutkan

Saya membuat GridStack dengan mengambil ide dari FlowStack oleh John Susek.