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

q8l4jmvw  于 2022-12-15  发布在  iOS
关注(0)|答案(2)|浏览(211)

我正在尝试实现一个视图,其中包含一个网格中交错排列的图像的LazyVGrid-如下面的Pinterest提要所示:

我知道WaterfallGrid库,但我想知道是否有一种方法可以用LazyGrid而不是普通的V/HGrid来实现这个功能。

j13ufse2

j13ufse21#

Beau Nouvelle的解决方案是有效的,但是,它的缺陷和小故障至少对我来说是这样。如果我们使用HStackalignment: .top,而不是使用LazyVGrid,它会工作得更好。
这里是风景

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
        
    }

我知道这不是性能,但到目前为止,我发现唯一的工作解决方案。
Here is the full source code

2vuwiymt

2vuwiymt2#

1.将数组拆分为所需的列数。
1.在LazyVGrid中创建2个VStack。
1.将ForEach放入两个VStack中,并使用您之前创建的每个数组来填充它们。
1.就是这样
一个粗略的例子如下...

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

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

这可能不是很好的性能,但它应该能够做你所追求的。

相关问题