为何在VStack内添加HStack会破坏ZStack的文本气泡尺寸计算？

我希望实现一个适配文本尺寸的圆角矩形气泡视图，内部包含多段文本。初始代码如下：

var body: some View {
    HStack {
        Spacer()
        ZStack(alignment: .trailing) {
            Color.blue
            VStack{
                Text(message.content)
                    .padding(.all, .oneUnit)
                    .multilineTextAlignment(.trailing)
            }
        }
        .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

使用ForEach循环渲染时，ZStack背景过宽，未能贴合文本。添加.layoutPriority(1)到VStack后，ZStack尺寸恢复正常：

var body: some View {
    HStack {
        Spacer()
        ZStack(alignment: .trailing) {
            Color.blue
            VStack{
                Text(message.content)
                    .padding(.all, .oneUnit)
                    .multilineTextAlignment(.trailing)
            }
            .layoutPriority(1)
        }
        .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

在VStack中添加第二段Text后，尺寸仍正常。但为了让第二段Text右对齐，在其外层添加包含Spacer的HStack后，ZStack又变为全屏宽度，布局失效。请问为何添加该HStack会破坏ZStack的尺寸计算？

原因解析 #

问题核心出在你添加的带Spacer的HStack上：

• SwiftUI的容器视图默认会尽可能占据可用空间，除非内部内容限制其尺寸。
• 当HStack内包含Spacer()时，这个Spacer会自动拉伸，占据HStack内所有剩余水平空间，直接把整个HStack的宽度拉满到父容器（ZStack）的最大可用宽度。
• 虽然你给VStack加了.layoutPriority(1)，但这个优先级只作用于VStack和ZStack内同级视图（Color.blue）的布局竞争。而HStack因为内部Spacer的存在会主动撑满宽度，VStack作为它的父级只能跟着被拉宽，最终导致ZStack也被撑到全屏。

替代方案（实现右对齐且不破坏尺寸） #

如果要实现文本右对齐，完全不需要用带Spacer的HStack，有两种更安全的方式：

方式1：给VStack设置整体对齐

直接给VStack指定右对齐，内部所有子视图默认继承该对齐方式：

VStack(alignment: .trailing) {
    Text(message.content)
        .padding(.all, .oneUnit)
    Text("第二段文本")
        .padding(.all, .oneUnit)
}
.layoutPriority(1)

方式2：单独给Text设置对齐（保留VStack默认布局）

如果只需要某一段文本右对齐，直接给该Text设置对齐属性即可：

VStack{
    Text(message.content)
        .padding(.all, .oneUnit)
        .multilineTextAlignment(.trailing)
    Text("第二段文本")
        .padding(.all, .oneUnit)
        .multilineTextAlignment(.trailing)
}
.layoutPriority(1)

这两种方式都能实现文本右对齐，同时保持气泡视图贴合文本尺寸，不会出现ZStack被拉宽的问题。

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