Mac Catalyst中SwiftUI实现鼠标点击拖动水平滚动的方法

要解决Mac Catalyst下SwiftUI ScrollView不支持点击拖动内容水平滚动的问题，最可靠的方式是直接桥接AppKit的NSScrollView——因为它可以完全自定义滚动行为，匹配Mac用户的操作习惯。

实现步骤 #

创建一个自定义的SwiftUI视图，通过UIViewRepresentable包装NSScrollView，配置它支持点击拖动内容滚动：

import SwiftUI
import AppKit

struct HorizontalScrollView<Content: View>: UIViewRepresentable {
    private let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    func makeUIView(context: Context) -> NSScrollView {
        let scrollView = NSScrollView()
        
        // 配置滚动条：仅显示水平滚动条，自动隐藏
        scrollView.hasHorizontalScroller = true
        scrollView.hasVerticalScroller = false
        scrollView.autohidesScrollers = true
        
        // 优先响应水平方向滚动
        scrollView.usesPredominantAxisScrolling = true
        
        // 配置内容容器，嵌入SwiftUI视图
        let clipView = NSClipView()
        let hostingView = NSHostingView(rootView: content)
        clipView.documentView = hostingView
        
        // 允许拖动内容滚动+弹性效果
        clipView.allowsRubberbanding = true
        
        // 确保内容高度自适应滚动视图，宽度由内容自身决定
        hostingView.autoresizingMask = [.height]
        
        scrollView.contentView = clipView
        return scrollView
    }
    
    func updateUIView(_ uiView: NSScrollView, context: Context) {
        // 更新SwiftUI内容
        if let hostingView = uiView.contentView.documentView as? NSHostingView<Content> {
            hostingView.rootView = content
        }
    }
}

使用示例 #

直接像原生SwiftUI ScrollView一样使用这个自定义视图：

struct ContentView: View {
    var body: some View {
        HorizontalScrollView {
            HStack(spacing: 20) {
                ForEach(0..<20) { index in
                    Text("Item \(index)")
                        .frame(width: 150, height: 100)
                        .background(.blue)
                        .foregroundColor(.white)
                }
            }
            .padding()
        }
        .frame(height: 120)
    }
}

原理说明 #

• Mac Catalyst下的原生SwiftUI ScrollView底层基于AppKit的NSScrollView，默认不支持点击拖动内容滚动（Mac原生行为是依赖滚动条或双指滚动）；而“Mac（专为iPad设计）”模式运行的是iPad版UIKit ScrollView，继承了iPad的拖动滚动行为。
• 自定义的HorizontalScrollView通过直接控制NSScrollView的配置，开启了内容拖动滚动和弹性效果，同时保留了Mac原生的滚动条交互，兼顾两种操作习惯。

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