Téléchargement WaterfallGrid - Téléchargement du code source WaterfallGrid

WaterfallGrid

Autre code source

1.1.0

Télécharger

Chouette

Une vue de disposition de la grille de cascade pour Swiftui.

Caractéristiques

Grille irrégulière de contenu.
Colonnes Numéro différentes par orientation de périphérique.
Espacement et rembourrage de grille personnalisables.
Direction de défilement horizontal ou vertical.
La mise à jour des éléments peut être animée.

Usage

Initialisation

Vous pouvez créer une grille qui affiche les éléments de la collecte en passant votre collection de données et une fermeture qui fournit une vue pour chaque élément de la collection. La grille transforme chaque élément de la collection en vue d'enfant en utilisant la fermeture fournie.

Waterfallgrid fonctionne avec des données identifiables (comme swiftui.list). Vous pouvez rendre vos données identifiables de deux manières: en transmettant vos données un chemin clé vers une propriété qui identifie de manière unique chaque élément, ou en rendant votre type de données conforme au protocole identifiable.

Exemple 1

Une grille de vues de Image de type à partir d'une collection de données identifiées par un chemin clé.

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

Exemple 2

Une grille de vues de type RectangleView à partir d'une collection de données Identifiable .

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

Ou, pour des cas simples comme celui-ci, juste:

 WaterfallGrid ( rectangles , content : RectangleView . init )

Style de grille

Pour personnaliser l'apparence de la grille, appelez la fonction gridStyle et transmettez les paramètres que vous souhaitez personnaliser.

Colonnes

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

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

Espacement et rembourrage

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

Animation

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

Faire défiler le comportement

Incorporer l'option ScrollView & Indicateurs

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

Direction de défilement horizontal

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

Un exemple complet

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

Exemple d'application

Explorez l'application WaterfallGridSample pour des exemples plus détaillés et interactifs.

Installation

Swift Package Manager

Dépendance de l'application

Sélectionnez Fichier> Packages Swift> Ajouter une dépendance des packages et entrez l'URL du référentiel (ajoutant des dépendances de package à votre application)

Dépendance du package

Ajoutez-le comme dépendance dans votre Package.swift manifeste:

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

Cocoapodes

Vous pouvez installer WaterfallGrid via Cocoapods en ajoutant la ligne suivante à votre Podfile :

 pod 'WaterfallGrid' , '~> 1.1.0'

Exécutez la commande pod install pour télécharger la bibliothèque et l'intégrer dans votre projet Xcode.

Guides de migration

Guide de migration en cascade 1.0.0

Versioning

Pour les versions disponibles, consultez les versions de ce référentiel.

Contributif

Les contributions sont plus que les bienvenues. Veuillez créer un problème GitHub avant de soumettre une demande de traction pour planifier et discuter de la mise en œuvre.