如何为SwiftUI ScrollView实现isDirectionalLockEnabled功能

SwiftUI原生ScrollView确实没有内置的方向锁定属性，要实现「每次仅允许横向或纵向单一方向滚动」的效果，有两种可行方案：

方案一：用UIViewRepresentable包装UIScrollView #

这是最直接可靠的方案，直接复用UIKit中UIScrollView的isDirectionalLockEnabled属性，兼容性和滚动稳定性都有保障。

代码示例：

import SwiftUI
import UIKit

struct DirectionalLockScrollView<Content: View>: UIViewRepresentable {
    var axes: Axis.Set
    var content: () -> Content
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.isDirectionalLockEnabled = true
        
        // 配置滚动方向与指示器
        scrollView.showsVerticalScrollIndicator = axes.contains(.vertical)
        scrollView.showsHorizontalScrollIndicator = axes.contains(.horizontal)
        scrollView.bounces = true
        
        // 嵌入SwiftUI内容
        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.widthAnchor.constraint(greaterThanOrEqualTo: scrollView.widthAnchor, constant: axes.contains(.horizontal) ? 1 : 0),
            hostingController.view.heightAnchor.constraint(greaterThanOrEqualTo: scrollView.heightAnchor, constant: axes.contains(.vertical) ? 1 : 0)
        ])
        
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        uiView.showsVerticalScrollIndicator = axes.contains(.vertical)
        uiView.showsHorizontalScrollIndicator = axes.contains(.horizontal)
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        DirectionalLockScrollView(axes: [.horizontal, .vertical]) {
            VStack(alignment: .leading) {
                ForEach(0..<5) { x in
                    HStack {
                        ForEach(0..<20) { y in
                            Text("Item \(x)-\(y)")
                                .padding(8)
                                .background(Color.gray.opacity(0.2))
                                .cornerRadius(4)
                        }
                    }
                    .padding(.vertical, 8)
                }
            }
            .padding()
        }
    }
}

方案二：纯SwiftUI手势拦截 #

如果不想依赖UIKit，可以通过自定义手势检测初始拖动方向，动态禁用另一方向的滚动。

代码示例：

struct LockableScrollView<Content: View>: View {
    var axes: Axis.Set
    @State private var lockedAxis: Axis? = nil
    let content: () -> Content
    
    var body: some View {
        ScrollView(axes, showsIndicators: true) {
            content()
                .gesture(
                    DragGesture(minimumDistance: 10)
                        .onChanged { value in
                            guard lockedAxis == nil else { return }
                            let deltaX = abs(value.translation.width)
                            let deltaY = abs(value.translation.height)
                            // 根据初始拖动方向锁定对应轴
                            lockedAxis = deltaX > deltaY ? .horizontal : .vertical
                        }
                        .onEnded { _ in
                            // 滚动结束后解锁
                            lockedAxis = nil
                        }
                )
        }
        // 根据锁定状态禁用对应方向滚动
        .scrollDisabled(lockedAxis == .horizontal && axes.contains(.vertical) || lockedAxis == .vertical && axes.contains(.horizontal))
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        LockableScrollView(axes: [.horizontal, .vertical]) {
            VStack(alignment: .leading) {
                ForEach(0..<5) { x in
                    HStack {
                        ForEach(0..<20) { y in
                            Text("Item \(x)-\(y)")
                                .padding(8)
                                .background(Color.gray.opacity(0.2))
                                .cornerRadius(4)
                        }
                    }
                    .padding(.vertical, 8)
                }
            }
            .padding()
        }
    }
}

方案对比 #

• 方案一：稳定可靠，完全复用UIKit成熟的滚动逻辑，适合大多数场景，尤其是需要精确滚动行为的需求。
• 方案二：纯SwiftUI实现，无UIKit依赖，但手势优先级可能与内置滚动手势冲突，需要根据内容手势情况微调。

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