GridStack

Paquet

Une vue de mise en page flexible pour Swiftui.

Mise à jour du WWDC20

Apple  a publié LazyVGrid et LazyHGrid sur WWDC20.

Si vous êtes bien pour ne supporter que I (Pad) OS 14, MacOS 11, TVOS 14, Watchos 7 respectivement ceux ^-- sont certainement la voie à suivre.

Si vous souhaitez prendre en charge I (Pad) OS 13, MacOS 10.15, TVOS 13, Watchos 6 Continuez à lire.

---

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

Passez simplement la largeur minimale que les cellules de la grille devraient avoir et l'espacement entre eux et cela s'ajustera en fonction de la largeur disponible.

Alors écrivant ceci:

vous donnera ceci:

Il s'ajuste également correctement lorsque l'appareil est tourné:

? Aperçu de l'utilisation

Pensez à la grille à la manière de la largeur minimale que vous voulez que vos cellules soient. De cette façon, il est facile de s'adapter à tout espace disponible. La seule autre taille que vous devez fournir est l' espacement entre les cellules.

Pour créer réellement la grille, nous devons connaître le nombre d'éléments . Ensuite, le constructeur de vues de contenu sera appelé avec chaque index et le CellWidth que vous pouvez ensuite passer au cadre de tout ce que vous voulez afficher à l'intérieur.

? Dimensionner vos vues à l'intérieur des cellules

La grille enveloppera chaque élément que vous fournissez dans une vue qui obtient la largeur de cellule comme largeur . Aucune contrainte de hauteur n'est mise sur la cellule. C'est-à-dire que vous pouvez dimensionner votre contenu aussi flexible que possible. Voici quelques exemples de ce que vous pouvez faire.

Hauteur définie par le contenu

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

Articles carrés

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

Éléments du rapport d'aspect

 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
) 

Mentions

J'ai créé GridStack en prenant des idées de Flowstack par John Susek.