WaterfallGrid 1.1.0

WaterfallGrid 1.1.0

×

由 Paolo Leonardi 维护。

WaterfallGrid 1.1.0

WaterfallGrid

SwiftUI 的瀑布流网格布局视图。

Image Demo 1

Swift Package Manager Twitter: @paololeonardi

特性

  • 不规则的内容网格。
  • 根据设备方向，列数不同。
  • 间距和网格填充可定制。
  • 水平或垂直滚动方向。
  • 项目更新可以动画显示。

要求

  • iOS 13.0+ / macOS 10.15+ / tvOS 13.0+ / watchOS 6.0+
  • Xcode 11.0+
  • Swift 5.1+

用法

初始化

您可以通过传递您的数据集合和一个为集合中的每个元素提供视图的闭包来创建显示元素集合的网格。网格通过提供的闭包将集合中的每个元素转换为一个子视图。

瀑布网格（WaterfallGrid）与可识别的数据（例如SwiftUI.List）配合使用。您可以通过两种方式使您的数据可识别：一种是传递一个键路径到唯一标识每个元素的属性的键路径，或者是使您的数据类型遵守Identifiable协议。

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

Animation Demo 4 Animation Demo 5

完整示例

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应用程序，了解更多详细和交互式示例。

动画演示 1  动画演示 2  动画演示 3

Image Demo 3

Image Demo 2

安装

Swift 包管理器

应用依赖

选择文件 > Swift 包 > 添加包依赖，并输入存储库 URL（将包依赖添加到您的应用）

包依赖

在您 Package.swift 的清单中将它作为依赖项添加

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

CocoaPods

您可以通过在 Podfile 中添加以下行来通过 CocoaPods 安装 WaterfallGrid

pod 'WaterfallGrid', '~> 1.0.0'

运行 pod install 命令以下载库并将其集成到您的 Xcode 项目中。

迁移指南

版本

有关可用的版本，请参阅此存储库的发布。

贡献

欢迎贡献力量。请在提交pull请求前创建GitHub问题以计划并讨论实现细节。

作者

致谢

WaterfallGrid受到以下项目的启发

许可

WaterfallGrid采用MIT许可证。详细信息请参阅LICENSE文件。