SwiftUI裁剪图片后仍可在裁剪区域外触发点击手势问题

问题场景 #

加载Assets中的横版图片，通过scaledToFill+clipped实现按比例填充裁剪后，点击红框（裁剪区域）外的部分仍会触发onTapGesture；添加contentShape(Rectangle())后，红框左右附近区域还是能触发手势，未完全解决问题。

原始代码 #

struct ImageTest: View {
    var body: some View {
        ZStack {
            Image("testImage")
                .resizable()
                .scaledToFill()
                .frame(width:400)
                .frame(height:400)
                .clipped()
                .border(.red)
                .onTapGesture {
                    print("TAPPED \(Date())")
                }
        }
    }
}

尝试修改后的代码（问题未完全解决） #

struct ImageTest: View {
    var body: some View {
        ZStack {
            Image("testImage")
                .resizable()
                .scaledToFill()
                .frame(width:400)
                .frame(height:400)
                .clipped()
                .contentShape(Rectangle())
                .border(.red)
                .onTapGesture {
                    print("TAPPED \(Date())")
                }
        }
    }
}

解决方法 #

问题核心是clipped()仅裁剪视觉显示，不会修改视图的命中测试边界，原始图片的超出部分仍会响应手势。以下两种方案可严格限制点击区域：

方案一：容器包裹绑定手势 #

用固定尺寸的透明矩形作为容器，将图片叠加在容器内，裁剪后给容器添加手势，确保点击范围完全限于容器边界：

struct ImageTest: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.clear)
                .frame(width: 400, height: 400)
                .border(.red)
                .overlay(
                    Image("testImage")
                        .resizable()
                        .scaledToFill()
                )
                .clipped()
                .onTapGesture {
                    print("TAPPED \(Date())")
                }
        }
    }
}

方案二：调整Modifier顺序+clipShape #

用clipShape(Rectangle())替代clipped()，同时将contentShape放在手势之前，确保命中测试区域与视觉裁剪区域完全同步：

struct ImageTest: View {
    var body: some View {
        ZStack {
            Image("testImage")
                .resizable()
                .scaledToFill()
                .frame(width: 400, height: 400)
                .clipShape(Rectangle())
                .contentShape(Rectangle())
                .border(.red)
                .onTapGesture {
                    print("TAPPED \(Date())")
                }
        }
    }
}

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