iPhone SE第一代VStack自适应内容宽度布局异常问题咨询

问题原因 #

这不是系统Bug，是你当前的布局逻辑在小屏设备上的约束优先级冲突导致的：

• 外层VStack设置的fixedSize(horizontal: true, vertical: false)，会让VStack优先取子视图的理想宽度，而非撑满可用空间。
• 内层HStack的.frame(maxWidth: .infinity)，会试图撑满父容器宽度。在iPhone SE第一代这类小屏设备上，系统无法同时满足这两个约束，进而出现布局错乱。

修复方案 #

你可以选择以下两种方式解决：

方案1：给HStack设置固定宽度，与上方矩形对齐 #

让HStack的宽度和红色矩形保持一致，确保整体布局宽度统一：

struct VStackSpacerView: View {
    var body: some View {
        VStack(spacing: 8) {
            Rectangle().fill(Color.red).frame(width: 200, height: 50)
            
            HStack {
                Text("left")
                Spacer()
                Text("right")
            }
            .frame(width: 200) // 设置固定宽度，与矩形一致
        }
        .fixedSize(horizontal: true, vertical: false)
    }
}

方案2：移除fixedSize，给VStack设置固定宽度 #

去掉外层的fixedSize，直接给VStack设置固定宽度，让所有子视图在该宽度内布局：

struct VStackSpacerView: View {
    var body: some View {
        VStack(spacing: 8) {
            Rectangle().fill(Color.red).frame(height: 50) // 移除width，继承VStack宽度
            
            HStack {
                Text("left")
                Spacer()
                Text("right")
            }
        }
        .frame(width: 200) // 给VStack设置固定宽度
    }
}

两种方案都能确保在包括iPhone SE第一代在内的所有设备上，实现文本左/右对齐且与红色矩形宽度一致的布局效果。

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