如何在 SwiftUI 中跨多个轴对齐多个视图？答案

【问题标题】：How do I align multiple views across multiple axes in SwiftUI?如何在 SwiftUI 中跨多个轴对齐多个视图？
【发布时间】：2021-12-22 12:59:09
【问题描述】：

如何在 SwiftUI 中布局以下内容？

两个圆圈沿蓝线水平居中对齐，顶部圆圈与沿绿线的矩形垂直对齐，底部圆圈与沿红线的底部矩形垂直对齐。

没有嵌套的HStack/VStack 结构可以描述这一点。我们认为解决方案与 custom alignment guides 有关，但我们能找到的所有示例都没有达到这种复杂程度。

【问题讨论】：

圆圈的大小是否相同，矩形的大小是否相同？
这样可以得到中心点。 stackoverflow.com/questions/60726589/…
@Yrb 圆圈的大小与实际情况相同，但我觉得在我正在寻找的解决方案中它们不应该是这样。在我们的特定情况下，矩形并不相同，它们是 Text 视图，我们支持动态类型。
@Yodagama 在首选项键中填充大小并对其进行帧计算是我们当前 hacky 解决方案的一部分，而这正是我想要避免的。 SwiftUI 旨在是“声明式”的，我应该能够声明我打算让 this 与 that 保持一致，然后计算机计算出细节。
为什么要投反对票？

标签： layout swiftui

【解决方案1】：

感觉在这种情况下你最好的选择是使用LazyVGrid。人们倾向于认为网格用于集合，我们可能有很长的项目列表，但它们也适用于已知的有限数量的孩子，所以我认为它们会在这里工作。

本质上，您有两列项目 - 两者都可以在一定程度上灵活，但听起来您的矩形列需要扩展更多。因此，您可以尝试以下方法开始：

let columns = [
  GridItem(.flexible(maximum: 120)), 
  GridItem(.flexible())
]

var body: some View {
  LazyVGrid(columns: columns) {
    // row 1, column 1
    RoundedRectangle(cornerRadius: 10)
      .frame(width: 100, height: 160)
    // row 1, column 2
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt enim in iaculis tincidunt. Nunc vitae imperdiet dolor")
    // row 2, column 1
    Circle()
      .frame(height: 100)
    // row 2, column 2
    Text("Integer vitae volutpat urna. Morbi vel pharetra dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris ornare a augue id cursus")
  }
}

上面的代码给了你类似的东西：

我自己还没有机会以这种方式使用网格，所以还没有尝试过它们提供的所有自定义功能，但感觉这可能是让你得到你想要的东西的最佳方式担心对齐指南或偏好。

【讨论】：

这是我们尝试的另一种方法，但由于我们实际设计的复杂性（上图是一个非常简化的版本），这意味着切割矩形中的子视图并重新组装它们以一种不同的方式，这并不令人满意。好主意。