如何修复SwiftUI双轴ScrollView中的点击事件偏移问题？

问题现象 #

在macOS SwiftUI应用中使用同时支持水平和垂直滚动的ScrollView时，当内容尺寸超过ScrollView容器，子视图的onTapGesture会触发错误坐标：点击目标位置比可见元素偏高，偏移量恰好等于标题栏高度；添加工具栏后偏移量会进一步增大。该问题在滚动后暂时消失，但调整窗口水平尺寸后会复发。

示例代码：

struct ContentView: View {
    @State var bool = false
    
    var body: some View {
        ScrollView([.vertical, .horizontal]) {
            Rectangle()
                .fill(bool ? .black : .gray)
                .onTapGesture {
                    bool.toggle()
                }
                .frame(width: 4000, height: 30)
        }
    }
}

可行修复方案 #

以下几种方案可规避该系统bug，且无需使用嵌套ScrollView：

方案1：自定义坐标空间手动修正点击位置 #

通过自定义坐标空间，在手势回调中计算正确的点击坐标，替代默认的onTapGesture：

struct ContentView: View {
    @State var bool = false
    private let scrollCoordinateSpace = "ScrollCoordinateSpace"
    
    var body: some View {
        ScrollView([.vertical, .horizontal]) {
            Rectangle()
                .fill(bool ? .black : .gray)
                .frame(width: 4000, height: 30)
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .onEnded { value in
                            let scrollOrigin = value.location.coordinateSpace(in: .named(scrollCoordinateSpace)).origin
                            let correctedY = value.location.y - scrollOrigin.y
                            // 判断点击是否落在Rectangle范围内
                            if correctedY >= 0 && correctedY <= 30 {
                                bool.toggle()
                            }
                        }
                )
        }
        .coordinateSpace(name: scrollCoordinateSpace)
    }
}

该方式通过手动计算坐标偏移，确保点击判断基于视图的实际位置。

方案2：封装原生NSScrollView #

直接使用AppKit原生滚动视图，避开SwiftUI封装层的坐标计算bug：

struct NativeScrollView<Content: View>: NSViewRepresentable {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    func makeNSView(context: Context) -> NSScrollView {
        let scrollView = NSScrollView()
        scrollView.hasVerticalScroller = true
        scrollView.hasHorizontalScroller = true
        scrollView.autohidesScrollers = false
        scrollView.borderType = .noBorder
        
        let hostingView = NSHostingView(rootView: content)
        hostingView.autoresizingMask = [.width, .height]
        scrollView.documentView = hostingView
        
        return scrollView
    }
    
    func updateNSView(_ nsView: NSScrollView, context: Context) {
        (nsView.documentView as? NSHostingView<Content>)?.rootView = content
    }
}

// 使用示例
struct ContentView: View {
    @State var bool = false
    
    var body: some View {
        NativeScrollView {
            Rectangle()
                .fill(bool ? .black : .gray)
                .onTapGesture {
                    bool.toggle()
                }
                .frame(width: 4000, height: 30)
        }
    }
}

原生NSScrollView的坐标系统更稳定，不会出现偏移问题，同时保留双轴滚动功能，滚动指示器也不会被遮挡。

方案3：通过padding抵消标题栏偏移 #

给ScrollView内容添加顶部padding，抵消标题栏带来的坐标偏移，同时扩展手势响应区域：

struct ContentView: View {
    @State var bool = false
    // 获取当前窗口标题栏高度
    private let titleBarHeight: CGFloat = NSApplication.shared.mainWindow?.titlebarHeight ?? 0
    
    var body: some View {
        ScrollView([.vertical, .horizontal]) {
            Rectangle()
                .fill(bool ? .black : .gray)
                .onTapGesture {
                    bool.toggle()
                }
                .frame(width: 4000, height: 30)
                .padding(.top, titleBarHeight)
                .contentShape(Rectangle().inset(by: -titleBarHeight))
        }
    }
}

该方式通过调整内容布局位置匹配点击坐标，同时扩展手势响应区域，确保点击位置与视觉元素对应。

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