GridStack

Gitterstack

Eine flexible Rasterlayoutansicht für Swiftui.

WWDC20 Update

Apple  veröffentlichte LazyVGrid und LazyHGrid unter WWDC20.

Wenn es Ihnen gut geht, nur I (PAD) OS 14, MacOS 11, tvos 14, watchos 7 zu unterstützen, sind ^-- definitiv der richtige Weg.

Wenn Sie I (PAD) OS 13, MacOS 10.15, TVOS 13, Watchos 6 unterstützen möchten, lesen Sie weiter.

---

iOS 13+, macOS 10.15+, tvos 13+, ⌚ watchos 6+

Übergeben Sie einfach die minimale Breite, die die Gitterzellen haben sollten, und den Abstand zwischen ihnen und es wird je nach verfügbarer Breite angepasst.

Also schreiben:

Wird dir Folgendes geben:

Es wird auch korrekt angepasst, wenn das Gerät gedreht wird:

? Nutzungsübersicht

Denken Sie an das Gitter in Bezug auf die minimale Breite , die Ihre Zellen sein sollen. Auf diese Weise ist es einfach, sich auf jeden verfügbaren Raum anzupassen. Die einzige andere Größe, die Sie bereitstellen müssen, ist der Abstand zwischen den Zellen.

Um das Netz tatsächlich zu erstellen, müssen wir die Anzahl der Elemente kennen. Anschließend wird der Builder in der Inhaltsansicht mit jedem Index und der Zellbreite aufgerufen, die Sie dann an den Rahmen von allem übergeben können, was Sie im Inneren anzeigen möchten.

? Größen Sie Ihre Ansichten in den Zellen

Das Netz wickelt jedes Element, das Sie zur Verfügung stellen, in einer Ansicht ein, mit der die Zellbreite als Breite eingestellt wird. Auf die Zelle wird keine Höhenbeschränkung gestellt. Das ist so, dass Sie Ihren Inhalt so flexibel wie möglich belegen können. Hier sind nur ein paar Beispiele, was Sie tun können.

Höhe durch Inhalt definiert

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

Quadratische Gegenstände

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

Seitenverhältnis Elemente

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

✍️ Unterschrift

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

Erwähnungen

Ich habe GridStack erstellt, indem ich Ideen von Flowstack von John SUSEK genommen habe.