SwiftUI：如何限制ScrollView仅在可见元素区域响应交互？

可行方案：封装UIScrollView并拦截手势识别 #

你尝试的第4种方案是可行的，核心是通过UIGestureRecognizerDelegate的gestureRecognizerShouldBegin(_:)方法，判断触摸点是否落在需要响应交互的区域（黑色矩形），若不在则让手势不生效，从而穿透到下方视图。

具体实现步骤 #

1. 创建UIViewRepresentable封装UIScrollView并实现手势代理：

import SwiftUI

struct CustomHorizontalScrollView<Content: View>: UIViewRepresentable {
    let content: Content
    // 传入子视图中允许交互的区域（相对于ScrollView内容的坐标）
    let interactiveFrame: CGRect
    
    init(interactiveFrame: CGRect, @ViewBuilder content: () -> Content) {
        self.interactiveFrame = interactiveFrame
        self.content = content()
    }
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.showsVerticalScrollIndicator = false
        scrollView.contentInsetAdjustmentBehavior = .never
        
        // 将SwiftUI内容包装到UIHostingController
        let hostingController = UIHostingController(rootView: content)
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(hostingController.view)
        
        // 设置内容视图约束
        NSLayoutConstraint.activate([
            hostingController.view.topAnchor.constraint(equalTo: scrollView.topAnchor),
            hostingController.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            hostingController.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            hostingController.view.heightAnchor.constraint(equalTo: scrollView.heightAnchor)
        ])
        
        // 设置手势代理
        scrollView.panGestureRecognizer.delegate = context.coordinator
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        context.coordinator.hostingController.rootView = content
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UIGestureRecognizerDelegate {
        let parent: CustomHorizontalScrollView
        
        init(parent: CustomHorizontalScrollView) {
            self.parent = parent
        }
        
        func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
            guard let scrollView = gestureRecognizer.view as? UIScrollView else { return true }
            
            // 获取触摸点在内容视图坐标系中的位置
            let touchPoint = gestureRecognizer.location(in: scrollView.subviews.first)
            // 判断是否在允许交互的区域内
            return parent.interactiveFrame.contains(touchPoint)
        }
    }
}

2. 在SwiftUI视图中使用该自定义ScrollView：

struct ContentView: View {
    // 黑色矩形的区域，根据实际布局调整坐标和尺寸
    let interactiveFrame = CGRect(x: 0, y: 300, width: 200, height: 200)
    
    var body: some View {
        ZStack {
            // 下方的可缩放ScrollView
            ScrollView([.horizontal, .vertical]) {
                Text("下方可缩放内容")
                    .font(.largeTitle)
                    .frame(width: 1000, height: 1000)
            }
            .gesture(MagnificationGesture().onChanged { _ in })
            
            // 可点击文本视图
            Text("可点击文本")
                .font(.title)
                .foregroundColor(.blue)
                .onTapGesture {
                    print("文本被点击")
                }
            
            // 自定义水平ScrollView
            CustomHorizontalScrollView(interactiveFrame: interactiveFrame) {
                HStack(spacing: 20) {
                    // 第一个子项：红色非交互区 + 黑色交互区
                    VStack {
                        Color.red.frame(height: 300)
                        Color.black.frame(width: 200, height: 200)
                    }
                    
                    // 其他子项
                    Color.green.frame(width: 200, height: 200)
                    Color.yellow.frame(width: 200, height: 200)
                }
            }
        }
    }
}

其他方案的补充说明 #

• 方案1：父视图设置allowsHitTesting(false)后，触摸事件不会传递到子视图，子视图无法响应交互，此方案不可行。
• 方案2：.contentShape(_:)仅用于扩展可交互区域，无法缩小或限制交互范围，无法满足需求。
• 方案3：offset移动子项后，ScrollView默认clipsToBounds=true会裁剪超出部分，即使关闭裁剪，触摸事件仍会被ScrollView接收，此方案不可行。
• 方案5：将子项移到ScrollView外会失去滚动关联，排序动画异常难以修复，不推荐使用。
• 方案6：手动跟踪位置易出现滞后和同步问题，维护成本高，不是最优解。

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