swiftui - 如何在 SwiftUI 中创建响应式网格布局？

Question

通常的做法是让一些在数组中具有多个属性的数据显示在视口的设备中，即compact或者wide（iPhone、iPad、纵向/横向等）。例如，我们可能希望在“portrait compact view”中显示 1 列 2 个项目，或者在“portrait wide view”中显示 1 列和 4 个项目。

代码方面，我们有UserInterfaceSizeClass, 可以按如下方式使用：

@Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
@Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?

...

HStack {
    if horizontalSizeClass == .compact {
      ...
    } else {
      ...
    }
}

或者，类似于计算ratio：

GeometryReader { proxy in
  if proxy.size.width > 324.0/2.0 {
    WideView()
  } else {
    NarrowView()
  }
}

而网格可以理解为一个二维数组，我们可以遍历所需的列数并嵌套在循环中，循环遍历所需的行数。

VStack {
    ForEach(0 ..< self.rows, id: \.self) { row in
        HStack {
            ForEach(0 ..< self.columns, id: \.self) { column in
              ...
            }
        }
    }
}

我希望这是有意义的，并且可以理解为独立于技术堆栈使用的一些基本原则。

因此，给定一维数据集合列表（请假设有大量行星）：

class Planet {
    var name: String
    var size: Double

    init(name:String, size:Double) {
        self.name = name
        self.size = size
    }
}

var planets = [Planet]()
let planet = Planet(name: "Mars", size: 30.5)
planets.append(planet)

数据需要分配给响应网格视图。

那么，考虑到上面公开的数据和不同的视口和设备纵向/横向模式，在 SwiftUI 中创建响应式网格布局的最佳方法是什么？

让知道是否有好的做法来解决这个问题！

标签： swiftui