SwiftUI中VStack设置.trailing后仍存尾部间距的解决方法

问题原因 #

你给VStack添加frame(maxWidth: .infinity)时，该frame的默认对齐方式为.center，导致VStack整体在宽屏容器中居中，从而右侧出现多余间距。

解决方案 #

给frame方法添加alignment: .trailing参数，让VStack对齐到容器的尾部，这样内部元素的.trailing对齐会紧贴容器右侧，消除间距：

VStack(alignment: .trailing) {
    Text("History & Text")
        .font(.title)
        .foregroundStyle(.secondary)
    
    Text(currentDisplay)
        .font(.largeTitle)
        .foregroundStyle(.white)
        .padding()
}
.frame(maxWidth: .infinity, alignment: .trailing)

额外检查点 #

如果Text(currentDisplay)的.padding()仍导致自身右侧有多余空间，可以指定padding的方向，比如使用.padding(.vertical)仅添加上下内边距，避免给右侧添加不必要的间距。

内容的提问来源于stack exchange，提问作者Sheng Dong