SwiftUI实现ScrollView顶部视图隐藏及流畅拖拽滚动方案问询

问题背景 #

我想复刻某款苹果应用的交互效果，推测它结合了滚动与拖拽手势。通过计算滚动偏移量、滚动方向及隐藏视图位置实现了一个版本，但存在两个核心问题：

• 禁用滚动时拖拽正常，但快速滑动滚动时拖拽出现卡顿
• 当contentOffset等于-200或0时尝试启用滚动，效果不可靠，几乎无法正常工作

原实现代码：

struct _TestView: View {
    @State var scrollOffset: CGPoint = .zero
    @State var contentOffset: CGPoint = CGPoint(x: .zero, y: -200)
    
    @State var scrollDisabled = true
    
    var drag: some Gesture {
        DragGesture()
            .onChanged { value in
                if !scrollDisabled { return } // if scrolling is enabled then don't change content offset
                
                var newLocation = startLocation ?? contentOffset

                // sets dragging bounds (-200 to 0)
                if contentOffset.y >= 0 && value.translation.height > 0 {
                    newLocation.y = 0;
                } else if contentOffset.y <= -200 && value.translation.height < 0 {
                    newLocation.y = -200;
                } else {
                    newLocation.y += value.translation.height
                }
                
                self.contentOffset = newLocation
            }
            .updating($startLocation) { _, _, _ in }
        
    }
    
    // this is misc. 
    @GestureState private var fingerLocation: CGPoint? = nil
    @GestureState private var startLocation: CGPoint? = nil
    
    var fingerDrag: some Gesture { DragGesture() }
    
    var body: some View {
        OffsetObservingScrollView(offset: $scrollOffset) {
            VStack {
                Rectangle()
                    .fill(.blue)
                    .frame(height: 200)
                Rectangle()
                    .fill(.red)
                    .frame(height: 1000)
            }
            .offset(y: contentOffset.y)
            .gesture(drag.simultaneously(with: fingerDrag))
        }
        .scrollDisabled(scrollDisabled)
        .navigationTitle("Hello, world!")
        .border(.black)
    }
}

优化方案 #

核心优化思路 #

1. 消除ScrollView原生手势与手动DragGesture的竞争冲突
2. 用滚动位置判断替代精确偏移值判断，避免浮点精度问题
3. 添加平滑动画过渡，符合原生交互风格

优化后代码 #

struct OptimizedTestView: View {
    @State private var scrollOffset: CGPoint = .zero
    // 顶部视图偏移范围：-200（完全隐藏）到0（完全显示）
    @State private var topViewOffset: CGFloat = -200
    @State private var isDraggingTopView = false
    
    var body: some View {
        OffsetObservingScrollView(offset: $scrollOffset) {
            VStack(spacing: 0) {
                // 顶部可拖拽视图
                Rectangle()
                    .fill(.blue)
                    .frame(height: 200)
                // 长内容滚动视图
                Rectangle()
                    .fill(.red)
                    .frame(height: 1000)
            }
            // 联动拖拽状态与视图偏移
            .offset(y: isDraggingTopView ? topViewOffset : 0)
            .gesture(
                DragGesture(minimumDistance: 5)
                    .onChanged { value in
                        let isAtScrollTop = scrollOffset.y <= 0
                        let isPullingDown = value.translation.height > 0
                        let isPushingUp = value.translation.height < 0
                        
                        // 判断是否进入顶部拖拽区间
                        if (isAtScrollTop && topViewOffset > -200) || (topViewOffset < 0 && isPullingDown) {
                            isDraggingTopView = true
                            // 限制偏移范围在-200到0之间
                            let newOffset = topViewOffset + value.translation.height
                            topViewOffset = max(-200, min(0, newOffset))
                        } else if topViewOffset == 0 && isPushingUp {
                            // 顶部完全显示时向上拖拽，切换到正常滚动
                            isDraggingTopView = false
                        }
                    }
                    .onEnded { _ in
                        // 拖拽结束自动归位动画
                        withAnimation(.spring()) {
                            topViewOffset = topViewOffset > -100 ? 0 : -200
                        }
                        // 延迟恢复滚动，避免手势切换冲突
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                            isDraggingTopView = false
                        }
                    }
            )
        }
        // 根据拖拽状态动态控制滚动禁用
        .scrollDisabled(isDraggingTopView)
        .navigationTitle("Hello, world!")
        .border(.black)
    }
}

// 滚动偏移监听组件实现
struct OffsetObservingScrollView<Content: View>: View {
    @Binding var offset: CGPoint
    let content: Content
    
    init(offset: Binding<CGPoint>, @ViewBuilder content: () -> Content) {
        self._offset = offset
        self.content = content()
    }
    
    var body: some View {
        ScrollView {
            content
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .preference(key: OffsetPreferenceKey.self, value: proxy.frame(in: .named("scrollView")).origin)
                    }
                )
        }
        .coordinateSpace(name: "scrollView")
        .onPreferenceChange(OffsetPreferenceKey.self) { value in
            offset = CGPoint(x: 0, y: -value.y)
        }
    }
}

struct OffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGPoint = .zero
    static func reduce(value: inout CGPoint, nextValue: () -> CGPoint) {}
}

关键优化点说明 #

• 移除了手动维护的contentOffset与scrollDisabled的冲突逻辑，用isDraggingTopView统一控制状态
• 给拖拽手势添加minimumDistance，避免误触触发拖拽
• 拖拽结束时添加弹簧动画自动归位，贴合苹果原生交互体验
• 用滚动位置判断替代精确偏移值判断，避免浮点精度导致的状态切换失效
• 延迟恢复滚动能力，解决手势切换时的竞争冲突

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