GridStack

Rejilla

Una vista de diseño de cuadrícula flexible para Swiftui.

Actualización WWDC20

Apple  lanzó LazyVGrid y LazyHGrid en WWDC20.

Si está bien para soportar solo I (PAD) OS 14, MacOS 11, Tvos 14, WatchOS 7 respectivamente aquellos ^-- definitivamente son el camino a seguir.

Si desea admitir I (PAD) OS 13, MacOS 10.15, Tvos 13, WatchOS 6 Sigue leyendo.

---

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

Simplemente pase el ancho mínimo que las celdas de la cuadrícula deben tener y el espacio entre ellas y se ajustará dependiendo del ancho disponible.

Entonces escribiendo esto:

te daré esto:

También se ajusta correctamente cuando se gira el dispositivo:

? Descripción general del uso

Piense en la cuadrícula en el camino de cuál es el ancho mínimo que desea que sean sus celdas. De esa manera, es fácil ajustarse a cualquier espacio disponible. El único otro tamaño que necesita proporcionar es el espacio entre las células.

Para crear realmente la cuadrícula, necesitamos saber los números de elementos . Luego, el constructor de vistas de contenido se llamará con cada índice y el ancho de celda que luego puede pasar al marco de lo que desee mostrar dentro.

? Dimensionamiento de sus puntos de vista dentro de las celdas

La cuadrícula envolverá cada elemento que proporcione en una vista que obtenga el ancho de celda establecido como ancho . No se coloca una restricción de altura en la celda. Eso es para que pueda calificar su contenido lo más flexible posible. Aquí hay solo un par de ejemplos lo que puede hacer.

Altura definida por contenido

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

Artículos cuadrados

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

Elementos de relación de aspecto

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

✍️ Firma

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

Menciones

Creé GridStack tomando ideas de Flowstack de John Susek.