GridStack

グリッドスタック

Swiftuiの柔軟なグリッドレイアウトビュー。

WWDC20アップデート

Appleは、WWDC20でLazyVGridとLazyHGridリリースしました。

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+、 ⌚ウォッチ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 )
} 

signature

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

言及

John SusekのFlowStackからアイデアを取得してGridStackを作成しました。