swiftUI 中的水平文本对齐方式

Question

我试图在模型上重现，但我的印象是视频质量文本不居中，这是模型和渲染以及我的代码

在 xcode 画布上渲染：

我想将文本质量视频居中

var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            HStack {
                Button(action: {}) {
                    Image(systemName: "chevron.left")
                        .foregroundColor(.white)
                        .padding()
                    
                }
                HStack {
                    Spacer()
                    Text("Qualité Vidéo")
                        .font(Fonts.Sora.bold.swiftUIFont(size: 19))
                        .foregroundColor(.white)
                        .multilineTextAlignment(.center)
                    Spacer()

                }

            }
            .padding(.horizontal)
            .padding(.bottom, 20)
            

Answer 1

标题位于其自己的

HStack

的中心，但随后它与按钮一起嵌套在另一个

HStack

中。所以这就是为什么它不再在最终布局中居中的原因。

要以最少的更改使标题居中，您可以将外部

HStack

更改为带

ZStack

的

(alignment: .leading)

。这样，按钮和标题就合并为两层：

VStack(alignment: .leading, spacing: 16) {
    ZStack(alignment: .leading) { // 👈 HERE
        Button(action: {}) {
            // ...
        }
        HStack {
            // contains title as before
        }
    }
    // + padding as before
}