SwiftUI子VStack设置leading对齐后内容仍居中如何修复

你遇到的对齐异常是对SwiftUI的VStack对齐规则理解偏差导致的，核心逻辑如下：

• 子VStack的alignment参数生效的前提是：子VStack自身的宽度大于内部内容的总宽度，此时它才能控制内部内容在自身可用空间里的对齐位置。如果子VStack宽度和内部内容宽度完全一致，不管设.leading还是.center，显示效果都没有区别。
• 父VStack默认会将所有宽度小于自身可用宽度的子视图，水平居中摆放。

你的代码里前3个设置了.leading的子VStack，内部都是短文本，而VStack里的Spacer()只会沿垂直方向（VStack的主轴方向）扩展高度，不会主动撑满水平宽度，因此这3个子VStack的实际宽度和内部Text的宽度完全相等：

1. 子VStack自身没有多余水平空间，配置的.leading对齐无法产生实际效果
2. 这三个和文本等宽的子VStack被父VStack默认居中摆放，视觉上就呈现出文字居中的效果

最后一个子VStack因为包含长文本，自身宽度被文本撑到和父VStack一致，内部的.leading对齐有了可作用的空间，因此文字正常左对齐。

给需要左对齐的短内容子VStack添加.frame(maxWidth: .infinity)修饰，让子VStack主动撑满父VStack的全部水平宽度，此时子VStack配置的.leading对齐就会正常生效。
修复后的完整代码：

struct CustomView: View {
    var body: some View {
        VStack {
            VStack(alignment: .center) {
                Text("Testing testing").lineLimit(2).font(.headline)
                Spacer()
                Spacer()
            }
            VStack(alignment: .leading) {
                Text("July 7, 2022").lineLimit(2).font(.subheadline)
                Spacer()
                Spacer()
            }
            .frame(maxWidth: .infinity, alignment: .leading)

            VStack(alignment: .leading) {
                Text("9am - 5pm").lineLimit(2).font(.subheadline)
                Spacer()
                Spacer()
            }
            .frame(maxWidth: .infinity, alignment: .leading)

            VStack(alignment: .leading) {
                Text("Hello World").lineLimit(2).font(.subheadline)
                Text("This string is very very very long to wrap onto next line").lineLimit(2).font(.system(size: 10.0))
            }
            Spacer()
            Spacer()
        }
    }
}

补充说明：最后一个子VStack因为内部长文本已经撑满了水平宽度，即使不加frame修饰也能保持左对齐效果，统一加上也不会产生布局异常。

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