SwiftUI中裁剪图片区域无法检测滚动的问题求助

问题原因 #

你的代码中，Button通过.contentShape(Rectangle())将整个100高度的frame区域设为可点击范围。即便Image被.scaledToFill()+.clipped()裁剪，这个可点击区域仍覆盖整个frame，导致裁剪外的区域也会拦截ScrollView的拖拽手势，无法触发滚动。

解决方法 #

方法1：用TapGesture替代Button #

直接给Image添加点击手势，仅让Image的可视区域响应点击，未显示的裁剪区域不会拦截滚动：

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .top) {
            ScrollView {
                LazyVStack {
                    ForEach(1..<100) {
                        Text("\($0)")
                    }
                }
            }

            Image("theme_background")
                .resizable()
                .scaledToFill()
                .frame(height: 100)
                .border(.black)
                .clipped()
                .gesture(
                    TapGesture()
                        .onEnded {
                            print(Date())
                        }
                )
        }
    }
}

方法2：移除Button的contentShape修饰符 #

如果坚持使用Button，去掉.contentShape(Rectangle())，让Button的可点击区域默认跟随裁剪后的Image形状，非可视区域不会拦截滚动：

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .top) {
            ScrollView {
                LazyVStack {
                    ForEach(1..<100) {
                        Text("\($0)")
                    }
                }
            }

            Button {
                print(Date())
            } label: {
                Image("theme_background")
                    .resizable()
                    .scaledToFill()
                    .frame(height: 100)
                    .border(.black)
                    .clipped()
                // 移除.contentShape(Rectangle())
            }
        }
    }
}

方法3：调整手势优先级（可选） #

通过simultaneousGesture让ScrollView的滚动手势优先触发，但这种方式可能导致点击和滚动同时触发，按需使用：

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .top) {
            ScrollView {
                LazyVStack {
                    ForEach(1..<100) {
                        Text("\($0)")
                    }
                }
            }

            Button {
                print(Date())
            } label: {
                Image("theme_background")
                    .resizable()
                    .scaledToFill()
                    .frame(height: 100)
                    .border(.black)
                    .clipped()
                    .contentShape(Rectangle())
            }
            .simultaneousGesture(DragGesture().onChanged { _ in })
        }
    }
}

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