SwiftUI中带返回按钮的标题文本水平居中实现问题

尝试复刻Figma设计稿时，发现“Qualité Vidéo”文本未居中。以下是相关截图和代码：

设计稿 #

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

解决方案 #

问题核心是外层HStack中，文本所在的容器没有占据返回按钮之外的全部可用宽度。修改方式如下：

方案1：简化嵌套结构 #

直接给Text添加frame(maxWidth: .infinity)，让它填充剩余空间并自动居中：

var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            HStack {
                Button(action: {}) {
                    Image(systemName: "chevron.left")
                        .foregroundColor(.white)
                        .padding()
                }
                Text("Qualité Vidéo")
                    .font(Fonts.Sora.bold.swiftUIFont(size: 19))
                    .foregroundColor(.white)
                    .frame(maxWidth: .infinity) // 关键：占满剩余宽度，文本自动居中
            }
            .padding(.horizontal)
            .padding(.bottom, 20)
        }
}

方案2：保留原有嵌套结构 #

给文本外层的HStack添加frame(maxWidth: .infinity)，让它占据剩余空间：

var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            HStack {
                Button(action: {}) {
                    Image(systemName: "chevron.left")
                        .foregroundColor(.white)
                        .padding()
                }
                HStack {
                    Text("Qualité Vidéo")
                        .font(Fonts.Sora.bold.swiftUIFont(size: 19))
                        .foregroundColor(.white)
                }
                .frame(maxWidth: .infinity) // 关键：让这个HStack占满剩余宽度
            }
            .padding(.horizontal)
            .padding(.bottom, 20)
        }
}

原理：HStack默认按子视图尺寸分配空间，添加frame(maxWidth: .infinity)后，文本容器会填充返回按钮以外的全部宽度，而Text在自己的容器内默认居中，从而实现设计稿中的整体居中效果。

内容的提问来源于stack exchange，提问作者Champêtre