GridStack

Gridstack

Uma visualização flexível do layout da grade para SwiftUi.

Atualização WWDC20

A Apple  lançou LazyVGrid e LazyHGrid na WWDC20.

Se você está bem em apoiar apenas o I (Pad) OS 14, MacOS 11, TvOS 14, WatchOS 7, respectivamente, os ^-- são definitivamente o caminho a percorrer.

Se você deseja apoiar o I (Pad) OS 13, MacOS 10.15, TvOS 13, WatchOS 6 Continue lendo.

---

iOS 13+, MacOS 10.15+, TvOS 13+, ⌚ WatchOS 6+

Basta passar na largura mínima que as células da grade devem ter e o espaçamento entre elas e ela se ajustará dependendo da largura disponível.

Então, escrevendo isso:

Vou te dar isso:

Ele também se ajusta corretamente quando o dispositivo é girado:

? Visão geral do uso

Pense na grade no caminho do que é a largura mínima que você deseja que suas células sejam. Dessa forma, é fácil se ajustar a qualquer espaço disponível. O único outro tamanho que você precisa fornecer é o espaçamento entre as células.

Para realmente criar a grade, precisamos conhecer o número de itens . Em seguida, o Builder de Visualização de Conteúdo será chamado com cada índice e a largura celular que você poderá passar para o quadro de tudo o que deseja exibir dentro.

? Dimensionando suas opiniões dentro das células

A grade envolverá cada item que você fornece em uma visualização que obtém a largura celular como largura . Nenhuma restrição de altura é colocada na célula. Isso é para que você possa dimensionar seu conteúdo o mais flexível possível. Aqui estão apenas alguns exemplos o que você pode fazer.

Altura definida por conteúdo

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

Itens quadrados

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

Itens de proporção

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

✍️ Assinatura

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

Menções

Criei GridStack , tirando idéias do FlowStack de John Susek.