SwiftUI中与特定组件交互时禁用ScrollView滚动的实现方法

要解决ScrollView与内部特定视图（比如PKCanvasView、你示例里的黄色单元格）交互时的滚动冲突——也就是触摸指定视图时让ScrollView停止滚动，触摸其他区域恢复滚动——这里有两种实用方案：

方案一：纯SwiftUI原生实现（推荐） #

通过@State变量控制ScrollView的滚动状态，再用highPriorityGesture确保指定视图优先捕获触摸事件，避免ScrollView抢先响应。

适配你的单元格示例代码 #

import SwiftUI

struct ContentView: View {
    // 控制ScrollView是否允许滚动的开关
    @State private var allowScroll = true
    
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 16) {
                // 蓝色单元格：触摸时不影响滚动
                ForEach(0..<10) { _ in
                    RoundedRectangle(cornerRadius: 12)
                        .fill(.blue)
                        .frame(height: 100)
                        .padding(.horizontal, 20)
                }
                
                // 黄色单元格：触摸时禁用ScrollView滚动
                RoundedRectangle(cornerRadius: 12)
                    .fill(.yellow)
                    .frame(height: 200)
                    .padding(.horizontal, 20)
                    // 高优先级手势：优先捕获触摸事件，阻止ScrollView响应
                    .highPriorityGesture(
                        DragGesture(minimumDistance: 0)
                            .onChanged { _ in allowScroll = false }
                            .onEnded { _ in
                                // 延迟恢复，避免手势结束瞬间的滚动跳变
                                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                                    allowScroll = true
                                }
                            }
                    )
                
                // 后续蓝色单元格
                ForEach(10..<20) { _ in
                    RoundedRectangle(cornerRadius: 12)
                        .fill(.blue)
                        .frame(height: 100)
                        .padding(.horizontal, 20)
                }
            }
            .padding(.vertical, 20)
        }
        // 根据状态控制滚动禁用
        .scrollDisabled(!allowScroll)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

适配PKCanvasView的代码 #

先把PKCanvasView包装成SwiftUI视图，再套用上面的手势逻辑：

import SwiftUI
import PencilKit

// 包装PKCanvasView为SwiftUI视图
struct CanvasWrapper: UIViewRepresentable {
    func makeUIView(context: Context) -> PKCanvasView {
        let canvas = PKCanvasView()
        // 设置画笔工具，按需调整
        canvas.tool = PKInkingTool(.pen, color: .black, width: 3)
        return canvas
    }
    
    func updateUIView(_ uiView: PKCanvasView, context: Context) {}
}

// 在ScrollView中使用
struct CanvasInScrollView: View {
    @State private var allowScroll = true
    
    var body: some View {
        ScrollView {
            // 其他视图...
            CanvasWrapper()
                .frame(height: 300)
                .padding(.horizontal, 20)
                .highPriorityGesture(
                    DragGesture(minimumDistance: 0)
                        .onChanged { _ in allowScroll = false }
                        .onEnded { _ in allowScroll = true }
                )
            // 其他视图...
        }
        .scrollDisabled(!allowScroll)
    }
}

方案二：基于UIKit的自定义ScrollView（适合复杂场景） #

如果原生SwiftUI的手势处理有冲突或延迟，可以直接操作底层的UIScrollView，通过绑定变量控制滚动状态：

import SwiftUI
import UIKit

// 自定义ScrollView包装器
struct ControlledScrollView<Content: View>: UIViewRepresentable {
    let content: Content
    @Binding var allowScroll: Bool
    
    init(allowScroll: Binding<Bool>, @ViewBuilder content: () -> Content) {
        self._allowScroll = allowScroll
        self.content = content()
    }
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        // 嵌入SwiftUI内容
        let hostingVC = UIHostingController(rootView: content)
        hostingVC.view.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(hostingVC.view)
        
        // 设置约束
        NSLayoutConstraint.activate([
            hostingVC.view.topAnchor.constraint(equalTo: scrollView.topAnchor),
            hostingVC.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            hostingVC.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            hostingVC.view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            hostingVC.view.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
        
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        // 更新滚动状态
        uiView.isScrollEnabled = allowScroll
    }
}

// 使用示例
struct CustomScrollViewDemo: View {
    @State private var allowScroll = true
    
    var body: some View {
        ControlledScrollView(allowScroll: $allowScroll) {
            LazyVStack(spacing: 16) {
                // 蓝色单元格...
                // 黄色单元格（绑定手势控制allowScroll）...
                // 后续单元格...
            }
            .padding(.vertical, 20)
        }
    }
}

注意事项 #

• 方案一的highPriorityGesture是关键，它能让指定视图优先获取触摸事件，阻止ScrollView的滚动手势触发。
• 针对PKCanvasView这类自带UIKit手势的视图，用方案一的手势包裹就能完美解决滚动冲突。
• 方案二更适合需要精细控制滚动行为的场景，比如处理多手势叠加的复杂交互。

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