如何在SwiftUI中创建响应性网格布局？

通常的做法是在一个数组中显示一些具有多个属性的数据，这些数据可以是

紧凑型

或

宽型

（iPhone、iPad、纵向/横向等）。例如，我们可能希望在“纵向压缩视图”中显示一列2个项目，或在“纵向宽视图”中显示一列4个项目

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

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

...

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

或者，计算

比率

：

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

网格可以理解为一个2D数组，我们可以迭代所需数量的列，嵌套在循环中，循环所需数量的行

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

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

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

让我们知道是否有好的实践方法来实现这一点

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)