SwiftUI嵌套ScrollView时的滚动冲突问题及解决咨询

核心问题原因 #

内层垂直ScrollView/List的手势会与外层水平ScrollView的手势竞争，当光标在内层区域时，水平拖拽会被内层手势干扰，导致卡顿。

解决方案一：UIKit包装垂直ScrollView（最可靠） #

通过自定义UIViewRepresentable包装UIScrollView，在滚动代理中判断拖拽方向，动态启用/禁用内层滚动手势，确保水平拖拽优先交给外层处理。

自定义垂直ScrollView代码 #

import SwiftUI

struct VerticalScrollView<Content: View>: UIViewRepresentable {
    private let content: () -> Content
    
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.showsVerticalScrollIndicator = false
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.delegate = context.coordinator
        
        // 添加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(equalTo: scrollView.widthAnchor)
        ])
        
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        guard let hostingController = uiView.subviews.first as? UIHostingController<Content> else { return }
        hostingController.rootView = content()
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, UIScrollViewDelegate {
        func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
            let velocity = scrollView.panGestureRecognizer.velocity(in: scrollView.superview)
            // 判断拖拽方向：水平拖拽时禁用内层手势，让外层响应
            if abs(velocity.x) > abs(velocity.y) {
                scrollView.panGestureRecognizer.isEnabled = false
                // 延迟恢复，避免后续垂直滚动受影响
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                    scrollView.panGestureRecognizer.isEnabled = true
                }
            }
        }
    }
}

使用自定义ScrollView重构代码 #

struct SplitView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 0) {
                // 替换原ScrollView为自定义VerticalScrollView
                VerticalScrollView {
                    VStack(alignment: .leading, spacing: 8) {
                        ForEach(0..<100) {
                            Text("Row \($0)")
                                .padding(.vertical, 4)
                        }
                    }
                    .frame(minWidth: 200, alignment: .leading)
                    .padding()
                }
                
                VerticalScrollView {
                    VStack(alignment: .leading, spacing: 8) {
                        ForEach(0..<100) {
                            Text("Row \($0)")
                                .padding(.vertical, 4)
                        }
                    }
                    .frame(minWidth: 200, alignment: .leading)
                    .padding()
                }
                
                VerticalScrollView {
                    VStack(alignment: .leading, spacing: 8) {
                        ForEach(0..<100) {
                            Text("Row \($0)")
                                .padding(.vertical, 4)
                        }
                    }
                    .frame(minWidth: 200, alignment: .leading)
                    .padding()
                }
            }
        }
    }
}

解决方案二：SwiftUI手势优先级调整（轻量方案） #

通过highPriorityGesture让垂直手势优先响应，水平手势交给外层ScrollView处理，适合简单场景。

代码示例 #

struct SplitView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 0) {
                ScrollView(showsIndicators: false) {
                    VStack(alignment: .leading, spacing: 8) {
                        ForEach(0..<100) {
                            Text("Row \($0)")
                                .padding(.vertical, 4)
                        }
                    }
                    .frame(minWidth: 200, alignment: .leading)
                    .padding()
                }
                // 添加手势优先级调整
                .highPriorityGesture(
                    DragGesture(minimumDistance: 0)
                        .onChanged { value in
                            // 仅拦截垂直方向拖拽，水平拖拽透传外层
                            guard abs(value.translation.y) > abs(value.translation.x) else { return }
                        }
                )
                
                // 其他列同理
                ScrollView(showsIndicators: false) {
                    VStack(alignment: .leading, spacing: 8) {
                        ForEach(0..<100) {
                            Text("Row \($0)")
                                .padding(.vertical, 4)
                        }
                    }
                    .frame(minWidth: 200, alignment: .leading)
                    .padding()
                }
                .highPriorityGesture(
                    DragGesture(minimumDistance: 0)
                        .onChanged { value in
                            guard abs(value.translation.y) > abs(value.translation.x) else { return }
                        }
                )
            }
        }
    }
}

针对List的适配方案 #

如果使用List代替ScrollView，同样可以用UIKit包装UITableView，或者给List添加相同的手势调整。包装List的逻辑与VerticalScrollView一致，只需将UIScrollView替换为UITableView即可。

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