Question

通常的做法是在阵列中显示一些具有多个属性的数据以显示在视口的设备中，例如compact或wide（iPhone，iPad，纵向/横向，等等）。例如，我们可能希望在“人像紧凑视图”中显示1列2项，或者在“人像宽视图”中显示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()
  }
}

网格可以理解为2D数组，我们可以迭代所需的列数并嵌套在循环中，遍历所需的行数。

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中创建自适应网格布局？

0 个答案: