SwiftUI：如何在容器视图内垂直和水平居中视图并在其下放置一些东西

Question

我搜索了 stackoverflow，但不幸的是没有找到解决这个特殊情况的方法。

我尝试显示以下场景：

• 容器视图
• 在该容器视图中水平和垂直居中的文本
• 位于此居中文本下方的文本

无论我尝试什么，我都无法在容器视图中水平和垂直居中该文本并将某些内容放在其下方，而不会将其放在容器视图的中心之外。

为了更好地理解，我在故事板中描绘了这种行为：

如果有人能帮我在 SwiftUI 中编写这个场景，那就太好了！:)

Answer 1

这是我更喜欢的可能方法（至少在开始时），因为两个标签保持独立，并且始终通过主要文本在父容器中居中。

struct DemoCenteredText: View {
    var body: some View {
        GeometryReader { gp in
            ZStack {
                Text("Primary Text").font(.title)
                    .alignmentGuide(VerticalAlignment.center, computeValue: { $0[.bottom] })
                    .position(x: gp.size.width / 2, y: gp.size.height / 2)
                Text("Secondary Text")
                    .alignmentGuide(VerticalAlignment.center, computeValue: { $0[.top] - 16 })
            }
        }
    }
}

.position上面的in 将主标题固定在父容器的中心，可用空间由 消耗GeometryReader，并alignmentGuide强制布局将辅助文本放置在距主文本底部偏移 16 处（实际上与您问题中的约束方式相同）。