如何使 LazyVGrid 中的每个项目的高度相同？

Question

编辑 这是 iOS 15 测试版中的回归。该代码在 iOS 14.5 上按预期工作：

我已向 Apple 提交了一个错误。

---

我的 SwiftUI 应用程序中有一个仪表板样式的屏幕，我在其中使用带有单个 .adaptative 列的 LazyVGrid 来布局我的仪表板小部件，其中小部件以环绕行的形式布置。

它按我的意愿工作。

但是，如果某个小部件恰好比其他小部件高，我希望同一行中的其他小部件垂直增长，因此它们最终具有与该行中最高的相同的高度。

这一小段代码说明了我的问题：

struct ContentView: View {
  var body: some View {
    LazyVGrid(columns: [.init(.adaptive(minimum: 45, maximum: 50), alignment: .top)]) {

      VStack {
        Spacer()
        Text("Hello")
      }
      .border(.red)

      Text("Lorem ipsum")
        .border(.blue)
    }
    .border(.green)
    .padding(.horizontal, 100)
  }
}

结果是：

我希望红色框（VStack 包含 Spacer + Hello）与蓝色框（lorem ipsum）一样高。

我怎样才能做到这一点？

请不要建议使用HStack，因为上面的例子只是为了说明我对LazyVGrid 的问题。我确实需要使用网格，因为我有很多孩子要布局，并且网格在手机和 iPad 外形尺寸之间工作得很好（动态调整列数，完全符合我的需要）。

Answer 1

我遇到了完全相同的问题。我的 LazyVGrid 在 iOS 14 上看起来很棒，但现在它的项目有不同的高度。

我发现了一个肮脏的解决方法来强制项目具有相同的高度： 在我的情况下，每个 LazyVGrid 中只有几个项目（所以它不会导致太多的性能下降），而且我很容易知道哪个项目的高度最大。所以我做了一个 ZStack 并在实际项目后面放了一个透明的最高项目。

struct ContentView: View {
  var body: some View {
    LazyVGrid(columns: [.init(.adaptive(minimum: 45, maximum: 50), alignment: .top)]) {
      ZStack {
        Text("Lorem ipsum")  // This is the highest item.
          .opacity(0)        // Make it transparent.
        Text("Hello")
      }
      .border(.red)

      Text("Lorem ipsum")
        .border(.blue)
    }
    .border(.green)
    .padding(.horizontal, 100)
  }
}

这种解决方法适用于我的情况，但我不建议在您的应用中广泛使用它，尤其是当您在网格中有很多项目时。