SwiftUI：如何让SquareView超出容器并保持ZStack比例定位？

需求说明 #

需要将不可修改的SquareView放入ZStack容器中，使其向上偏移并被顶部裁剪，最终效果为灰色正方形接近ZStack宽度，顶部超出红色背景区域被裁剪，同时保持ZStack的288/136比例与整体定位。

现有代码 #

SquareView定义（不可修改） #

struct SquareView: View {
    var body: some View {
        Rectangle()
            .fill(.gray.opacity(0.6))
            .aspectRatio(1, contentMode: .fit)
    }
}

当前整体视图代码 #

VStack {
    ZStack {
        Color.red
        SquareView()
            .padding(.bottom, 80)
    }
    .aspectRatio(288/136, contentMode: .fit)
    .border(.yellow)
    .clipped()
    Spacer()
}

当前问题 #

SquareView的尺寸由ZStack的高度决定，无法接近ZStack的宽度，也无法实现顶部超出并被裁剪的效果。

解决方案 #

修改后的代码如下：

VStack {
    ZStack {
        Color.red
        SquareView()
            .frame(maxWidth: .infinity) // 让正方形优先占满ZStack宽度
            .offset(y: -80) // 向上偏移，使顶部超出ZStack
    }
    .aspectRatio(288/136, contentMode: .fit)
    .border(.yellow)
    .clipped() // 裁剪超出ZStack的部分
    Spacer()
}

关键改动说明 #

• .frame(maxWidth: .infinity)：强制SquareView占满ZStack的可用宽度，由于SquareView本身设置了aspectRatio(1)，它的高度会自动等于宽度，此时高度会远大于ZStack的高度，自然实现顶部超出的效果。
• .offset(y: -80)：直接将正方形向上偏移指定距离，替代原来的padding(.bottom)，这样能精准控制偏移量，确保顶部超出ZStack范围。
• 保留ZStack的aspectRatio和外层的.clipped()：保证ZStack的比例不变，同时裁剪掉超出ZStack边界的部分。

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