WaterfallGrid

瀑布格里德

Swiftui的瀑佈網格佈局視圖。

特徵

• 內容不規則網格。
• 每個設備方向的列號不同。
• 可自定義的間距和網格填充。
• 水平或垂直滾動​​方向。
• 項目更新可以動畫。

用法

初始化

您可以創建一個網格，通過傳遞您的數據集合以及為收集中每個元素提供視圖的封閉來顯示集合的元素。網格通過使用所提供的閉合將收藏集中的每個元素轉換為兒童視圖。

WaterfallGrid與可識別的數據（例如SwiftUi.List）一起工作。您可以通過以下兩種方式之一使數據可識別：通過與數據一起傳遞，成為唯一標識每個元素的屬性的關鍵路徑，或通過使您的數據類型符合可識別的協議。

示例1

從密鑰路徑識別的數據集合中的類型Image視圖網格。

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

示例2

從一系列Identifiable數據集合中的類型RectangleView視圖網格。

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

或者，對於這樣的簡單情況，僅：

 WaterfallGrid ( rectangles , content : RectangleView . init )

網格風格

要自定義網格的外觀，請調用gridStyle函數，然後傳遞要自定義的參數。

列

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

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

間距和填充

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

動畫片

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

滾動行為

嵌入ScrollView和指示器選項

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

水平滾動方向

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

示例應用程序

探索WaterfallGridSample應用程序，以獲取一些更詳細和互動的示例。

安裝

Swift軟件包管理器

應用依賴性

選擇文件> Swift軟件包>添加軟件包依賴關係並輸入存儲庫URL（將軟件包依賴項添加到您的應用程序）

包裝依賴性

將其添加為Package.swift中的依賴性。 Swift清單：

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

可可錄

您可以通過在豆莢中添加以下行來安裝通過WaterfallGrid Podfile ：

 pod 'WaterfallGrid' , '~> 1.1.0'

運行pod install命令以下載庫並將其集成到您的Xcode項目中。

遷移指南

• WaterfallGrid 1.0.0遷移指南

版本控制

有關可用的版本，請參見此存儲庫上的版本。

貢獻

貢獻非常受歡迎。在提交拉動請求以計劃和討論實施之前，請創建一個GitHub問題。

作者

• Paolo Leonardi（@paoleoleonardi）

學分

WaterfallGrid受到以下項目的啟發：

• qgrid -https：//github.com/q-mobile/qgrid
• 網格-https：//github.com/swiftuiextensions/grid
• Swiftui實驗室-https：//swiftui-lab.com

執照

根據MIT許可證，WaterfallGrid可用。有關更多信息，請參見許可證文件。