Question

如何在SwiftUI中实现集合视图（即，矩形排列在网格中）？

我尝试过在多个值范围内进行ForEach-ing，然后将计数器用作Array的索引，但遇到了很多问题，因此正在寻找实现集合视图的另一种方法。

要换行的单元格。我有一个SegmentedControl，它用于设置要在一行中压缩多少个单元格。

这里是我所拥有的：

VStack { // Multiple rows
    ForEach((0..<requiredRows).identified(by: \.self)) { row in // Iterate over (previously calculated) required row count
        HStack(spacing: 50)) { // Row
            ForEach((0..<self.maximumOnXAxis).identified(by: \.self)) { cell in // Iterate over available cells
                MyView(
                    width: calculatedSize,
                    height: calculatedSize / 2.0,
                    colour: Color(
                        red: lst[row * self.maximumOnXAxis][0],
                        green: lst[row * self.maximumOnXAxis][1],
                        blue: lst[row * self.maximumOnXAxis][2]
                    )
                )
            }
        }
    }

以上所有内容都在ScrollView中。

当前问题是“无法在合理的时间内进行类型检查...”，这是在我将colour: Colour(...)参数添加到MyView之后发生的。

预期效果的示例：

Answer 1

SwiftUI确实支持ScrollView，尽管您必须管理自己的网格，但是您可以使用它来显示集合。 GeometryReader方法可能会有所帮助，它使您可以轻松地将“单元格”缩放到父视图的宽度和长度。

作为参考，我创建了一个简单的水平滚动视图。您可以使用相同的逻辑来创建网格视图：

import SwiftUI
import PlaygroundSupport

struct MyView : View {

    let items: [String] = ["1", "2", "3", "4", "5"]
    var body : some View {
        GeometryReader { geometry in
            ScrollView {
                HStack {
                  ForEach(self.items.identified(by: \.self)) { row in
                    Text(row)
                        .padding(geometry.size.width / 5)
                        .background(Color.green)
                  }
                }
            }.background(Color.white)

        }
        .padding()
        .background(Color.red)
    }

}

let vc = UIHostingController(rootView: MyView())
PlaygroundPage.current.liveView = vc

Answer 2

也许这就是您要寻找的：https://github.com/pietropizzi/GridStack

唯一缺少的功能是您无法进行布局之类的“砌体”

实现一个集合视图SwiftUI

2 个答案: