SwiftUI中VStack设置.leading对齐后嵌套Text视图未左对齐问题

以下是我的VStack定义代码：

VStack(alignment: .leading, spacing: 1) {
    Text("entry.titleAlert hajdfg dgfhds fghjds gfhjdsg fhjdsg2")
        .frame(maxWidth: .infinity)
        .multilineTextAlignment(.leading)
        .font(.caption)
        .padding(5)
        .background(Color(uiColor: .alertNews))
   

    Text("entry.contentAlert jhdsg fdhjsgf dhjsgf dhjsgf jdhsgf jdhsgf jdhsgf jdhsgf dhjsgf dhjsgf hdsgfh dghjf gsdhjgf dhjsgf dhjsgf dhjsg fjdhsg fjhdsgf jhdsgf jdhsgf dhjsgf jdhsgfhjdsg fhdsg fgdsjgfdhjs gfjdhsgf hs")
        .frame(maxWidth: .infinity)
        .multilineTextAlignment(.leading)
        .font(.caption)
        .opacity(0.7)
        .lineLimit(5)
        .padding(5)
        .background(Color(uiColor: .alertNews))
    Spacer()
}
.frame(maxWidth: .infinity, alignment: .leading)

实际效果中视图并未左对齐，为何设置了.leading对齐后仍未生效？

问题出在你给两个Text添加的.frame(maxWidth: .infinity)修饰符上。这个设置会让Text的宽度直接撑满VStack的可用宽度，此时VStack(alignment: .leading)的对齐规则对这两个Text完全失效——因为它们的宽度已经和VStack一样宽，没有多余空间来体现左对齐的位置差异。

方案一：让背景仅包裹内容并左对齐 #

直接去掉Text的.frame(maxWidth: .infinity)即可，此时Text宽度由内容决定，VStack的左对齐设置会生效：

VStack(alignment: .leading, spacing: 1) {
    Text("entry.titleAlert hajdfg dgfhds fghjds gfhjdsg fhjdsg2")
        .multilineTextAlignment(.leading)
        .font(.caption)
        .padding(5)
        .background(Color(uiColor: .alertNews))

    Text("entry.contentAlert jhdsg fdhjsgf dhjsgf dhjsgf jdhsgf jdhsgf jdhsgf jdhsgf dhjsgf dhjsgf hdsgfh dghjf gsdhjgf dhjsgf dhjsgf dhjsg fjdhsg fjhdsgf jhdsgf jdhsgf dhjsgf jdhsgfhjdsg fhdsg fgdsjgfdhjs gfjdhsgf hs")
        .multilineTextAlignment(.leading)
        .font(.caption)
        .opacity(0.7)
        .lineLimit(5)
        .padding(5)
        .background(Color(uiColor: .alertNews))
    Spacer()
}
.frame(maxWidth: .infinity, alignment: .leading)

方案二：背景撑满宽度，内容左对齐 #

如果需要背景占满整个宽度，保留.frame(maxWidth: .infinity)即可，multilineTextAlignment(.leading)已经确保内容左对齐。要是看起来还是没对齐，大概率是父容器（比如NavigationView、List）自带默认水平边距，给父容器添加.padding(.horizontal, 0)就能去掉这个边距。

另外，VStack末尾的Spacer()会把两个Text挤到顶部，这是正常的布局效果，和对齐问题无关。

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