SwiftUI：如何将叠加图像裁剪至其所属视图？

我实现了如下用于展示书籍图片的MaskContentView视图：

struct MaskContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(LinearGradient(colors: [.red, .green], startPoint: .top, endPoint: .bottom))
            Rectangle()
                .fill(LinearGradient(colors: [.red, .purple, .green], startPoint: .top, endPoint: .bottom))
                .padding(10)
            Rectangle()
                .fill(LinearGradient(colors: [.yellow, .green], startPoint: .top, endPoint: .bottom))
                .padding(20)
                .overlay(alignment: .center) {
                    Image("book")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .colorMultiply(.black)
                        .opacity(0.1)
                        .rotationEffect(.degrees(-20), anchor: .center)
                        .offset(x: 50.0, y: 10)
                        .clipShape(Rectangle())
                        .clipped()
                    
                }
            Text("Tourism")
                .foregroundStyle(.white)
                .font(.largeTitle)
        }
        .frame(width: 200, height: 250)
    }
}

我试图将叠加在该矩形上的图像裁剪至该矩形范围内，但图像溢出到了背景的矩形上。裁剪包含overlay的矩形也无法解决此问题，请问该如何实现需求？

问题核心是：overlay的默认绘制逻辑不受父视图裁剪约束——你之前给图像单独加.clipped()，只会裁剪图像自身，但因为图像有偏移和旋转，超出父矩形的部分依然会显示；而如果把.clipped()加在.overlay()之前，也不会生效，因为overlay是后续添加的内容。

正确的做法是把.clipped()放在.overlay()之后，让父矩形连同它的叠加内容一起被裁剪：

struct MaskContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(LinearGradient(colors: [.red, .green], startPoint: .top, endPoint: .bottom))
            Rectangle()
                .fill(LinearGradient(colors: [.red, .purple, .green], startPoint: .top, endPoint: .bottom))
                .padding(10)
            Rectangle()
                .fill(LinearGradient(colors: [.yellow, .green], startPoint: .top, endPoint: .bottom))
                .padding(20)
                .overlay(alignment: .center) {
                    Image("book")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .colorMultiply(.black)
                        .opacity(0.1)
                        .rotationEffect(.degrees(-20), anchor: .center)
                        .offset(x: 50.0, y: 10)
                }
                .clipped() // 关键：将裁剪放在overlay之后，约束整个区域
            Text("Tourism")
                .foregroundStyle(.white)
                .font(.largeTitle)
        }
        .frame(width: 200, height: 250)
    }
}

补充说明 #

• 可以去掉图像本身的.clipShape(Rectangle())和.clipped()，因为父视图的裁剪已经会约束图像的显示范围。
• 如果需要更灵活的裁剪形状，也可以用.clipShape()替换.clipped()，比如换成圆角矩形等自定义形状。

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