Ein Wasserfallgitteransicht für Swiftui.
Sie können ein Raster erstellen, das die Elemente der Sammlung anzeigt, indem Sie Ihre Datensammlung und einen Verschluss übergeben, das eine Ansicht für jedes Element in der Sammlung bietet. Das Raster verwandelt jedes Element in der Sammlung in eine untergeordnete Sichtweise, indem der gelieferte Verschluss verwendet wird.
WaterfallGrid arbeitet mit identifizierbaren Daten (wie Swiftui.List). Sie können Ihre Daten auf eine von zwei Arten identifizierbar machen: indem Sie zusammen mit Ihren Daten einen Schlüsselweg zu einer Eigenschaft übergeben, die jedes Element eindeutig identifiziert, oder indem Sie Ihren Datentyp dem identifizierbaren Protokoll entsprechen.
Beispiel 1
Ein Raster von Ansichten mit Image aus einer Sammlung von Daten, die durch einen Schlüsselpfad identifiziert wurden.
WaterfallGrid ( ( 0 ..< 10 ) , id : . self ) { index in
Image ( " image ( index ) " )
. resizable ( )
. aspectRatio ( contentMode : . fit )
}Beispiel 2
Ein Raster von Ansichten von Typ RectangleView aus einer Sammlung Identifiable Daten.
WaterfallGrid ( rectangles ) { rectangle in
RectangleView ( rectangle : rectangle )
}Oder für einfache Fälle wie diese nur:
WaterfallGrid ( rectangles , content : RectangleView . init ) Um das Erscheinungsbild des Gitters anzupassen, rufen Sie die gridStyle -Funktion an und übergeben Sie die Parameter, die Sie anpassen möchten.
Spalten
WaterfallGrid ( cards ) { card in
CardView ( card : card )
}
. gridStyle ( columns : 2 ) WaterfallGrid ( cards , content : CardView . init )
. gridStyle (
columnsInPortrait : 2 ,
columnsInLandscape : 3
)Abstand und Polsterung
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 ) )In ScrollView & Indicators Option einbetten
ScrollView ( showsIndicators : true ) {
WaterfallGrid ( rectangles , content : RectangleView . init )
}Horizontale Bildlaufrichtung
ScrollView ( . horizontal ) {
WaterfallGrid ( rectangles , content : RectangleView . init )
. scrollOptions ( direction : . horizontal )
} 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 ) )
} Entdecken Sie die WaterfallGridSample -App für einige detailliertere und interaktivere Beispiele.
App -Abhängigkeit
Wählen Sie Datei> Swift -Pakete> Paketabhängigkeit hinzufügen und geben Sie die Repository -URL ein (Hinzufügen von Paketabhängigkeiten zu Ihrer App).
Paketabhängigkeit
Fügen Sie es als Abhängigkeit in Ihr Package.swift hinzu.
dependencies: [
. package ( url : " https://github.com/paololeonardi/WaterfallGrid.git " , from : " 1.1.0 " )
] Sie können WaterfallGrid über Cocoapods installieren, indem Sie Ihrem Podfile die folgende Zeile hinzufügen:
pod 'WaterfallGrid' , '~> 1.1.0' Führen Sie den Befehl pod install aus, um die Bibliothek herunterzuladen und in Ihr Xcode -Projekt zu integrieren.
Die verfügbaren Versionen finden Sie in den Veröffentlichungen dieses Repositorys.
Beiträge sind mehr als willkommen. Bitte erstellen Sie ein GitHub -Problem, bevor Sie eine Pull -Anfrage zur Planung und Erörterung der Implementierung einreichen.
Waterfallgrid wurde von den folgenden Projekten inspiriert:
Wasserfallgrid ist im Rahmen der MIT -Lizenz erhältlich. Weitere Informationen finden Sie in der Lizenzdatei.