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可用。有关更多信息，请参见许可证文件。