swiftui grid

Grade swiftui

Layout de visualização da grade Swiftui com estilos personalizados.

Características

• Layout baseado em Zstack
• Rolagem vertical e horizontal
• Suporta todas as plataformas de maçã
• Estilos personalizados (ModularGridStyle, STAGEREDGRIDSTYLE)
• Padrões de código Swiftui (estilestratos, AmbientalValues, ViewBuilder)
• Desenvolvimento ativo para aplicativos de produção

Open GridDemo.xcodeproj para obter mais exemplos para iOS, macos, vigilantes e TvOS

Estilos

ModularGridStyle (padrão)

 ScrollView {
    Grid ( colors ) {
        Rectangle ( )
            . foregroundColor ( $0 )
    }
}
. gridStyle (
    ModularGridStyle ( columns : . min ( 100 ) , rows : . fixed ( 100 ) )
)

StaggeredGridStyle

 ScrollView {
    Grid ( 1 ... 69 , id :  . self ) { index in
        Image ( " ( index ) " )
            . resizable ( )
            . scaledToFit ( )
    }
}
. gridStyle (
    StaggeredGridStyle ( . horizontal , tracks : 8 , spacing : 4 )
) 

Faixas

A configuração das faixas permite que você personalize o comportamento da grade no seu caso de uso específico. A grade modular e escalonada usa o valor das faixas para calcular o layout. No layout modular, as colunas e linhas são faixas.

 public enum Tracks : Hashable {
    case count ( Int )
    case fixed ( CGFloat )
    case min ( CGFloat )
}

Contar

A grade é dividida em frações iguais de tamanho fornecidas pela visualização dos pais.

 ModularGridStyle ( columns : 3 , rows : 3 )
StaggeredGridStyle ( tracks : 8 )

Fixo

O tamanho do item é fixado em uma largura ou altura específica.

 ModularGridStyle ( columns : . fixed ( 100 ) , rows : . fixed ( 100 ) )
StaggeredGridStyle ( tracks : . fixed ( 100 ) )

Min

Autoletayout respeitando uma largura ou altura do item min.

 ModularGridStyle ( columns : . min ( 100 ) , rows : . fixed ( 100 ) )
StaggeredGridStyle ( tracks : . min ( 100 ) ) 

Preferências

Obtenha o tamanho e a posição do item com as preferências

 struct CardsView : View {
    @ State var selection : Int = 0
    
    var body : some View {
        ScrollView {
            Grid ( 0 ..< 100 ) { number in
                Card ( title : " ( number ) " )
                    . onTapGesture {
                        self . selection = number
                    }
            }
            . padding ( )
            . overlayPreferenceValue ( GridItemBoundsPreferencesKey . self ) { preferences in
                RoundedRectangle ( cornerRadius : 16 )
                    . strokeBorder ( lineWidth : 4 )
                    . foregroundColor ( . white )
                    . frame (
                        width : preferences [ self . selection ] . width ,
                        height : preferences [ self . selection ] . height
                    )
                    . position (
                        x : preferences [ self . selection ] . midX ,
                        y : preferences [ self . selection ] . midY
                    )
                    . animation ( . linear )
            }
        }
    }
} 

Sdks

• iOS 13.1+
• Mac Catalyst 13.1+
• MacOS 10.15+
• WatchOS 6+
• Xcode 11.0+

Roteiro

• Itens abrangem
• Recursos 'CSS Grid'

Contribuições de código

Sinta -se à vontade para contribuir via solicitação de garfo/puxão para a filial Master. Se você deseja solicitar um recurso ou relatar um bug, inicie um novo problema.

Contribuições do café

Se você achar esse projeto útil, considere se tornar meu patrocinador do Github.