ios - 如何使用 SwiftUI LazyVGrid 创建交错网格？

Question

我正在尝试实现一个视图，其中包含网格中交错图像的 LazyVGrid - 如以下 Pinterest 提要所示：

我知道 WaterfallGird 库，但我想知道是否有办法使用 LazyGrid 而不是普通的 V/HGrid 来实现此功能。

Answer 1

Beau Nouvelle 解决方案正在运行，但是，至少对我来说它是错误的和故障的。而不是使用LazyVGridif 我们使用HStackwith alignment: .topIt 效果更好。

这是视图

var body: some View {

        HStack(alignment: .top) {            
            LazyVStack(spacing: 8) {
                ForEach(splitArray[0]) {...}
            }
            
            LazyVStack(spacing: 8) {
                ForEach(splitArray[1]) {...}
            }
        }
    }

这是拆分数组的代码

    private var splitArray: [[Photo]] {
        var result: [[Photo]] = []
        
        var list1: [Photo] = []
        var list2: [Photo] = []
        
        photos.forEach { photo in
            let index = photos.firstIndex {$0.id == photo.id }
            
            if let index = index {
                if index % 2 == 0  {
                    list1.append(photo)
                } else {
                    list2.append(photo)
                }
            }
        }
        result.append(list1)
        result.append(list2)
        return result
        
    }

我知道这不是性能，而是到目前为止我找到的唯一可行的解​​决方案。

这是完整的源代码

Answer 2

1. 将您的数组拆分为您需要的列数。
2. 在您的 LazyVGrid 中创建 2 个 VStack。
3. 在两个 VStack 中放置一个 ForEach 并使用您之前创建的每个数组来填充它们。
4. 而已

一个粗略的例子如下......

// split array
let splitArrays = ([TileItem], [TileItem])

ScrollView {
    LazyVGrid(*setup GridItems here*) {
        VStack {
            ForEach(splitArrays.0) { tile in
                Image(tile.image)
            }
        }
        VStack {
            ForEach(splitArrays.0) { tile in
                Image(tile.image)
            }
        }
    }
}

这可能不是很高效，但它应该能够做你想要的。