在SwiftUI中如何在多个轴上对齐多个视图？

Question

在SwiftUI中如何在多个轴上对齐多个视图？

layoutswiftui

3

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

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

没有嵌套的HStack/VStack结构可以描述这种情况。我们认为解决方案与自定义对齐指南有关，但是我们找到的所有示例都无法达到这种复杂程度。

- Robert Atkins

这些圆形大小是否完全相同？矩形大小也是如此吗？ - Yrb

你可以通过以下方式获取中心点。https://dev59.com/4rnoa4cB1Zd3GeqPYdi9#62279021 - YodagamaHeshan

@Yrb 这些圆圈大小是相同的，但我认为在我寻找的解决方案中它们不应该需要相同。在我们的特定情况下，矩形不是相同的，它们是“Text”视图，并且我们支持动态类型。 - Robert Atkins

@Yodagama 在偏好键中填充大小并对其进行帧计算是我们当前的临时解决方案的一部分，而这正是我想要避免的。SwiftUI旨在“声明式”，我应该能够声明我打算将此与那个对齐，然后计算机会解决细节问题。 - Robert Atkins

为什么会有踩/关闭投票？ - Robert Atkins

我可以告诉你，答案将涉及PrefKeys和AlignmentGuides的组合。如果你还没有看过SwiftUI Lab上的这个内容，你应该去评估一下。由于我们既没有确切的布局，也没有你之前的代码可供使用，所以我不确定我们能提供多少帮助。但我可以告诉你，这是可行的，而你所做的可能并不是“hacky”。虽然SwiftUI是声明式的，但它也以某种方式处理布局，你需要使用像pref keys这样的东西来提供它需要的信息，以便按照你想要的方式进行布局。 - Yrb

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScottM · Answer 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")
  }
}

上面的代码会给你类似这样的结果：

Visual appearance of above code

我自己还没有机会以这种方式使用网格，所以还没有尝试过它们提供的所有自定义选项，但是感觉这可能是最好的方法，可以让你得到想要的结果，而不必担心对齐指南或偏好设置。