在 SwiftUI 上创建漂亮的网格视图的简单方法

Pinterest 像网格

在 SwiftUI 上创建漂亮的网格视图的简单方法🙂

该组件允许您将数组拆分为任意数量的列,同时仍使用正确的索引处理原始数组。

安装

斯威夫特包管理器

  1. 在 Xcode 中,选择“文件”>“Swift 包”>“添加包依赖项”。
  2. 进入https://github.com/thaisrfernandes/PinterestLikeGrid.git
  3. 按照提示选择要使用的版本或分支。

用法

该组件需要一个要显示的可散列项目数组、要使用的列数以及一个闭包来表示网格中的每个项目。

以下是如何使用它的示例:

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 网格(简单方法)

xavier7t – SwiftUI 中的网格视图

GitHub

查看 Github