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

Question

我搜索了stackoverflow，但不幸的是没有找到针对这种情况的解决方案。

我尝试显示以下情况：

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

无论如何，我都无法在容器视图中将文本水平和垂直居中放置在其下方，而又不能将其置于容器视图的中央。

为了更好地理解，我在情节提要中描述了这种行为：

如果有人可以帮助我在SwiftUI中编写此方案，那就太好了！ ：）

Answer 1

尝试一下：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World! Centereed")
                .overlay(Text("john").offset(y: 30))
        }
    }
}

Answer 2

这是我更喜欢的一种方法（至少对于开始而言），因为两个标签都保持独立，并且始终通过主文本输入到父容器中。

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将主要标题固定在父容器的中心，GeometryReader占用了可用空间，并且alignmentGuide强制布局将辅助文本放置在距文本底部16偏移处基本文本（实际上与问题中的约束相同）。