Download WaterfallGrid - download do código -fonte WaterfallGrid

WaterfallGrid

Outro código-fonte

1.1.0

Baixar

Cachoeira

Uma vista do layout da grade em cascata para Swiftui.

Características

Grade irregular de conteúdo.
Número das colunas diferentes por orientação do dispositivo.
Espaçamento e preenchimento de grade personalizáveis.
Direção de rolagem horizontal ou vertical.
A atualização de itens pode ser animada.

Uso

Inicialização

Você pode criar uma grade que exibe os elementos da coleção passando sua coleção de dados e um fechamento que fornece uma visualização para cada elemento da coleção. A grade transforma cada elemento da coleção em uma visão infantil usando o fechamento fornecido.

A CatallGrid trabalha com dados identificáveis (como swiftu.list). Você pode tornar seus dados identificáveis de duas maneiras: passando junto com seus dados, um caminho -chave para uma propriedade que identifica exclusivamente cada elemento ou fazendo com que seu tipo de dados esteja em conformidade com o protocolo identificável.

Exemplo 1

Uma grade de visualizações da Image do tipo de uma coleção de dados identificados por um caminho -chave.

 WaterfallGrid ( ( 0 ..< 10 ) , id :  . self ) { index in
  Image ( " image ( index ) " )
    . resizable ( )
    . aspectRatio ( contentMode : . fit )
}

Exemplo 2

Uma grade de visualizações do tipo RectangleView de uma coleção de dados Identifiable .

 WaterfallGrid ( rectangles ) { rectangle in
  RectangleView ( rectangle : rectangle )
}

Ou, para casos simples como este, apenas:

 WaterfallGrid ( rectangles , content : RectangleView . init )

Estilo de grade

Para personalizar a aparência da grade, chama a função gridStyle e passe os parâmetros que você deseja personalizar.

Colunas

 WaterfallGrid ( cards ) { card in
  CardView ( card : card )
}
. gridStyle ( columns : 2 )

 WaterfallGrid ( cards , content : CardView . init )
. gridStyle (
  columnsInPortrait : 2 ,
  columnsInLandscape : 3
)

Espaçamento e preenchimento

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( spacing : 8 )
. padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )

Animação

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( animation : . easeInOut ( duration : 0.5 ) )

Comportamento de rolagem

Incorporar na opção ScrollView & Indicators

 ScrollView ( showsIndicators : true ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
}

Direção de rolagem horizontal

 ScrollView ( . horizontal ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
  . scrollOptions ( direction : . horizontal )
}

Um exemplo completo

 ScrollView ( . horizontal , showsIndicators : false ) {
  WaterfallGrid ( cards ) { card in
    CardView ( card : card )
  }
  . gridStyle (
    columnsInPortrait : 2 ,
    columnsInLandscape : 3 ,
    spacing : 8 ,
    animation : . easeInOut ( duration : 0.5 )
  )
  . scrollOptions ( direction : . horizontal )
  . padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )
}

App de amostra

Explore o aplicativo WaterfallGridSample para alguns exemplos mais detalhados e interativos.

Instalação

Gerente de pacotes Swift

Dependência do aplicativo

Selecione Arquivo> Pacotes Swift> Adicionar dependência do pacote e insira o URL do repositório (adicionando dependências de pacotes ao seu aplicativo)

Dependência do pacote

Adicione -o como uma dependência dentro do seu Package.swift Manifesto:

dependencies: [
  . package ( url : " https://github.com/paololeonardi/WaterfallGrid.git " , from : " 1.1.0 " )
]

Cocoapods

Você pode instalar WaterfallGrid via Cocoapods, adicionando a seguinte linha ao seu Podfile :

 pod 'WaterfallGrid' , '~> 1.1.0'

Execute o comando pod install para baixar a biblioteca e integrá -lo ao seu projeto Xcode.

Guias de migração

Guia de migração de cascata 1.0.0

Versão

Para as versões disponíveis, consulte os lançamentos neste repositório.

Contribuindo

As contribuições são mais do que bem -vindas. Crie um problema do GitHub antes de enviar uma solicitação de tração para planejar e discutir a implementação.