SwiftUI Image与ZStack非预期布局异常问题排查

构建分块布局视图的需求如下：

• 顶部区域：带左上角叠加文本的图片，占视图总高度的2/3
• 底部区域：包含文本信息与按钮的横向容器，占视图总高度的1/3

初始实现代码：

struct MainView: View {
    var body: some View {
        GeometryReader { gr in
            VStack(spacing: 0) {
                ImageInfoView()
                    .frame(height: gr.size.height * 0.66)
                BottomInfoView()
            }
            .clipShape(RoundedRectangle(cornerRadius: 20))
        }
    }
}

struct ImageInfoView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Image("testImage")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .overlay(Rectangle()
                    .fill(Color.black.opacity(0.5))
                )
            
            HStack {
                Text("Top left text")
                    .foregroundColor(.white)
                    .padding()
            }
        }
    }
}

struct BottomInfoView: View {
    var body: some View {
        HStack {
            VStack(alignment:.leading) {
                Text("Some title")
                Text("Some subtitle")
            }
            
            Spacer()
            Button("BUTTON") {}
        }
        .padding()
        .background(.gray)
    }
}

测试代码：

struct TestView: View {
    var body: some View {
        MainView()
            .frame(height: 200)
            .padding([.leading, .trailing], 16)
    }
}

测试出现两个不符合预期的现象：

1. 给MainView设置高度为400时，左上角叠加文本可见，但顶部图片区域实际高度占比超过66%
2. 给MainView设置高度为200时，左上角叠加文本完全消失
   预期逻辑为：左上角文本始终锚定在图片区域左上角，与整体视图高度无关，上下区域高度严格保持2:1比例。

效果对比：

两个异常都来自布局优先级冲突：

• 图片设置aspectRatio(contentMode: .fill)后，默认会按照自身原始宽高比撑开父容器，布局优先级高于手动给ImageInfoView设置的高度约束。总高度为400px时，图片会将顶部容器撑到高于设定的66%高度，挤压底部区域空间，直接导致高度比例失准。
• 总高度为200px时，留给顶部图片区域的高度本身较小，.fill模式下图片会优先保证自身填充比例，将ZStack内的左上角文本挤出容器边界；外层VStack设置了clipShape，所有超出边界的内容都会被裁剪，文本自然无法显示。

给图片组件增加clipped()修饰，强制图片在父容器给定的尺寸范围内渲染，不会反向撑开父视图、也不会溢出边界：

struct ImageInfoView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Image("testImage")
                .resizable()
                .aspectRatio(contentMode: .fill)
                // 限制图片不超出父容器边界
                .clipped()
                .overlay(Rectangle()
                    .fill(Color.black.opacity(0.5))
                )
            
            // 移除多余的HStack嵌套，减少布局层级
            Text("Top left text")
                .foregroundColor(.white)
                .padding()
        }
    }
}

额外优化：将高度计算的近似值0.66替换为精确值2/3，保证比例完全准确：

ImageInfoView()
    .frame(height: gr.size.height * 2/3)

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