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

Question

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

我想要 ZStack 右下方有一个复选框。此代码打勾就在视图的中间。

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

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

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

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

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

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

Answer 1

尝试申请

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

到文本。

Answer 2

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

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

如果您不想像上面的答案一样扩展文本来填充容器，这将很有用。

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
        })
    }
  }
}

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

Forcing a View to the bottom right of View in SwiftUI

cs193p

swift

swiftui