SwiftUI中如何实现滚动时显示与隐藏视图？

问题场景 #

需要实现：初始状态头部视图显示，向上滚动ScrollView时头部滑出隐藏；向下滚动超过头部高度的增量时，头部重新显示。原代码仅通过滚动方向判断状态，导致显示/隐藏不稳定。

修正后的实现代码 #

import SwiftUI

struct NewContentView: View {
    private let gridItemSpacing: CGFloat = 2
    private let gridColumns = 5
    private let headerHeight: CGFloat = 80 // 固定头部高度
    @State private var scrollOffset: CGFloat = 0
    @State private var lastOffset: CGFloat = 0
    @State private var headerVisible = true

    var body: some View {
        VStack(spacing: 0) {
            // 头部视图：通过offset实现平滑动画，避免条件渲染的不稳定
            Rectangle()
                .fill(.red)
                .frame(height: headerHeight)
                .offset(y: headerVisible ? 0 : -headerHeight)
                .animation(.easeInOut(duration: 0.3), value: headerVisible)
            
            GeometryReader { outer in
                ScrollView(.vertical) {
                    gridView(outer)
                        .background(
                            GeometryReader { proxy in
                                Color.clear
                                    .preference(key: ScrollOffsetKey.self, value: proxy.frame(in: .named("ScrollView")).minY)
                            }
                        )
                }
                .coordinateSpace(name: "ScrollView")
                .onPreferenceChange(ScrollOffsetKey.self) { currentOffset in
                    let delta = currentOffset - lastOffset
                    
                    // 过滤ScrollView顶部的弹性滚动偏移，只保留有效滚动距离
                    scrollOffset = max(currentOffset, 0)
                    
                    // 状态切换逻辑
                    // 向上滚动且头部可见，滚动距离超过小阈值时隐藏头部
                    if delta < 0 && headerVisible && scrollOffset > 10 {
                        headerVisible = false
                    }
                    // 向下滚动且头部隐藏，滚动距离超过头部高度时显示头部
                    else if delta > 0 && !headerVisible && scrollOffset < (lastOffset - headerHeight) {
                        headerVisible = true
                    }
                    
                    lastOffset = currentOffset
                }
            }
        }
        .background(.black)
    }
    
    private func gridView(_ geo: GeometryProxy) -> some View {
        LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: gridItemSpacing), count: gridColumns), spacing: gridItemSpacing) {
            ForEach(0..<300) { index in
                let itemSize = (geo.size.width - CGFloat(gridColumns - 1) * gridItemSpacing) / CGFloat(gridColumns)
                Rectangle()
                    .fill(.yellow)
                    .frame(width: itemSize, height: itemSize)
            }
        }
    }
}

// 简化滚动偏移PreferenceKey，避免可选值判断
struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

#Preview {
    NewContentView()
}

关键优化点 #

• 固定头部高度阈值：定义headerHeight常量，作为向下滚动显示头部的判断依据
• 有效滚动距离跟踪：用scrollOffset过滤ScrollView顶部弹性区域的负值偏移，确保判断逻辑准确
• 严谨的状态触发条件：
  • 向上滚动时增加小阈值（10），避免轻微滚动就触发隐藏
  • 向下滚动时要求滚动距离超过头部高度，避免误触发显示
• 平滑动画替代条件渲染：通过offset结合动画实现头部的滑入滑出，替代原有的条件渲染，避免视图销毁重建导致的不稳定
• 简化PreferenceKey实现：直接使用非可选的CGFloat默认值，减少不必要的可选值判断逻辑

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