SwiftUI中Image超出父级VStack内边距，无法裁剪至ZStack范围

问题原因 #

第二个ZStack设置.frame(width: .infinity, height: 48)后，VStack的布局逻辑会优先让这个子视图占满可用宽度，导致第一个ZStack因缺少明确的宽度约束，其内部使用.scaledToFill()的Image会突破VStack的24pt内边距限制，超出屏幕边缘。

解决方案 #

给第一个ZStack添加宽度约束和裁剪操作，确保它严格遵守VStack的内边距范围：

修改后的完整代码 #

struct Test3: View {
    var body: some View {
        VStack {
            ZStack {
                Color.blue
                Image("SplashPage")
                    .resizable()
                    .scaledToFill()
            }
            .frame(maxWidth: .infinity) // 约束ZStack宽度为VStack的可用宽度（即内边距后的范围）
            .clipped() // 裁剪超出ZStack边界的Image内容
            
            ZStack {
                Color.gray
                Button("touch me", action: {})
            }
           .frame(width: .infinity, height: 48)
        }
        .padding(24)
    }
}

关键说明 #

• .frame(maxWidth: .infinity)：让第一个ZStack的宽度完全贴合VStack的内边距限制，避免因布局优先级问题导致宽度溢出。
• .clipped()：将超出ZStack边界的Image部分裁剪掉，确保Image始终显示在指定的内边距范围内，适配所有机型。

内容的提问来源于stack exchange，提问作者jon.marson