在 SwiftUI 上创建漂亮的网格视图的简单方法
Pinterest 像网格
在 SwiftUI 上创建漂亮的网格视图的简单方法🙂
该组件允许您将数组拆分为任意数量的列，同时仍使用正确的索引处理原始数组。
安装
斯威夫特包管理器
- 在 Xcode 中，选择“文件”>“Swift 包”>“添加包依赖项”。
- 进入
https://github.com/thaisrfernandes/PinterestLikeGrid.git - 按照提示选择要使用的版本或分支。
用法
该组件需要一个要显示的可散列项目数组、要使用的列数以及一个闭包来表示网格中的每个项目。
以下是如何使用它的示例：
struct ContentView: View {
@State var data = [1, 2, 3, 4]
var body: some View {
PinterestLikeGrid($data, columns: 3, spacing: 8) { item, index in
Text("\(item)")
if let index = index {
Text("Index: \(index)")
}
}
}
}
参数
| 范围 | 类型 | 描述 |
|---|---|---|
data |
Binding<Array<T>> |
绑定要显示在网格上的可散列项数组 |
columns |
Int |
（可选）要显示网格的列数。默认值为 2。 |
columnSpacing |
CGFloat |
（可选）列之间的间距数。默认值为 8。 |
rowSpacing |
CGFloat |
（可选）行间距数。默认值为 8。 |
spacing |
CGFloat |
（可选）行和列之间的间距数。默认值为 8。 |
content |
(_ item: T, _ index: Int) -> View |
接收一个项目和一个索引的闭包，该索引必须返回一个视图来表示网格中的每个项目 |
基本初始化
PinterestLikeGrid($data) { item, index in
...
}
列数
PinterestLikeGrid($data, columns: 3) { item, index in
...
}
项目间距
PinterestLikeGrid($data, spacing: 12) { item, index in
...
}
项目垂直间距
PinterestLikeGrid($data, columns: 3, rowSpacing: 6) { item, index in
...
}
项目水平间距
PinterestLikeGrid($data, columnSpacing: 3) { item, index in
...
}
实施细节
splitDataPinterestLikeGrid 使用称为将数据数组拆分为指定数量的列的辅助方法。该方法返回可哈希项数组的数组。
然后，它使用 aHStack来显示列，并使用 aVStack来显示每列中的项目。
getIndexInList(for:)是一个辅助方法，它返回数据数组中指定项的索引。
参考
这个组件很大程度上受到了我特别感谢的这两个教程的启发：
Kavsoft – SwiftUI 3.0：具有匹配几何效果的交错网格 – Xcode 13 – WWDC 2021
Haipp – 如何在 SwiftUI 中创建 PINTEREST 网格（简单方法）
