在 SwiftUI 中强制视图位于视图的右下角答案

【问题标题】：Forcing a View to the bottom right of View in SwiftUI在 SwiftUI 中强制视图位于视图的右下角
【发布时间】：2020-11-21 15:34:09
【问题描述】：

我正在通过 YouTube 上发布的 2020 年版斯坦福 CS193p 自学 SwiftUI。

我想要一个ZStack，右下角有一个复选框。此代码放置复选标记就在视图的中间。

ZStack {
    .... stuff ....
    Text("✓")
}

令我惊讶的是，这段代码将复选标记放在视图的左上角。（我GeometryReader 的心智模型显然是错误的。）

ZStack {
   .... stuff ...
   GeometryReader { _ in Text("✓") }
}

我不能按照另一个 StackOverflow 答案中的建议使用 ZStack(alignment: .bottomTrailing) { ... }，因为我希望对齐仅适用于文本，而不适用于其他任何内容。

有什么办法可以得到右下角的复选标记吗？我试图避免绝对偏移，因为无论ZStack 视图的大小如何，我都希望我的代码能够正常工作。另外，有没有关于布局的好教程，以便我自己找出这些问题的答案？

[如果你想知道。我正在玩作业 3。我正在添加一个“作弊模式”，如果板上有匹配集，它会用一个小复选标记标记它们。]

【问题讨论】：

你知道ZStack中最大子视图的大小吗？我有一个使用此信息的解决方案

标签： swift swiftui cs193p

【解决方案1】：

尝试申请

.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)

到文本。

【讨论】：

【解决方案2】：

如果您知道Text 的大小和ZStack 中最大的子视图，我会说这是可能的。

在下面的示例中，我使用 40 作为 Text 的宽度，使用 20 作为 Text 的高度，并使用 200（正方形）作为最大的 Color 子视图。然后，您可以使用相对偏移量和布局指南计算子视图偏移量。

如果您不想像上面的答案那样扩展 Text 以填充容器，这很有用。

struct ColorsView: View {
  var body: some View {
    ZStack(alignment: .center) {
      Color.red.frame(width: 200,
                      height: 200,
                      alignment: .center)
      Text("Bye")
      Text("Hello").frame(width: 40, height: 20)
        .alignmentGuide(HorizontalAlignment.center, computeValue: { dimension in
          -60
        })
        .alignmentGuide(VerticalAlignment.center, computeValue: { dimension in
          -80
        })
    }
  }
}

【讨论】：

我真的希望我不必对数字进行硬编码。回到 InterfaceBuilder 时代，我可以将 TextView 固定在封闭容器的右下角。