SwiftUI疑问：添加Spacer()后文本为何显示在屏幕中央？

对应的代码如下：

import SwiftUI
struct AboutMyTestAppView: View {
var body: some View {
    VStack {    
        HStack {
            Image(systemName: "quote.bubble")
                .padding(.leading, 24)
            Text("Edition")
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 10)         
            Text("Professional")
                .fontWeight(.semibold)
                .frame(maxWidth: .infinity, alignment: .trailing)
                .padding(.trailing, 24)
        }   
    }
    .navigationBarBackButtonHidden(false)
    .navigationTitle("About My Test App")
    .navigationBarTitleDisplayMode(.inline)
    .navigationBarColor(backgroundColor: .gray, titleColor: .white)
    Spacer()
  } 
}

原因分析 #

你把Spacer()放在了VStack的外面，而不是内部。SwiftUI里布局容器（比如VStack）只会管理内部子视图的布局关系，外面的Spacer()和VStack是同级视图，默认会被隐式包裹在一个居中对齐的VStack里。同时你的VStack没有设置frame(maxHeight: .infinity)，它只会占据自身内容的高度，导致整个组合视图在屏幕中居中显示。

修复方案 #

方案一：将Spacer移入VStack内部并让VStack撑满高度 #

把Spacer()放到VStack里面，同时给VStack添加frame(maxHeight: .infinity)，让它撑满整个屏幕高度，这样Spacer就会把上方的HStack顶到屏幕顶部：

import SwiftUI
struct AboutMyTestAppView: View {
var body: some View {
    VStack {    
        HStack {
            Image(systemName: "quote.bubble")
                .padding(.leading, 24)
            Text("Edition")
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 10)         
            Text("Professional")
                .fontWeight(.semibold)
                .frame(maxWidth: .infinity, alignment: .trailing)
                .padding(.trailing, 24)
        }
        Spacer() // 移到VStack内部
    }
    .frame(maxHeight: .infinity) // 让VStack撑满屏幕高度
    .navigationBarBackButtonHidden(false)
    .navigationTitle("About My Test App")
    .navigationBarTitleDisplayMode(.inline)
    .navigationBarColor(backgroundColor: .gray, titleColor: .white)
  } 
}

方案二：给VStack设置顶部对齐并撑满高度 #

保持Spacer()在外面，给VStack添加frame(maxHeight: .infinity, alignment: .top)，强制VStack顶部对齐并撑满屏幕高度：

import SwiftUI
struct AboutMyTestAppView: View {
var body: some View {
    VStack {    
        HStack {
            Image(systemName: "quote.bubble")
                .padding(.leading, 24)
            Text("Edition")
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 10)         
            Text("Professional")
                .fontWeight(.semibold)
                .frame(maxWidth: .infinity, alignment: .trailing)
                .padding(.trailing, 24)
        }   
    }
    .frame(maxHeight: .infinity, alignment: .top) // 设置顶部对齐并撑满高度
    .navigationBarBackButtonHidden(false)
    .navigationTitle("About My Test App")
    .navigationBarTitleDisplayMode(.inline)
    .navigationBarColor(backgroundColor: .gray, titleColor: .white)
    Spacer()
  } 
}

内容的提问来源于stack exchange，提问作者Edward Hasted