SwiftUI：如何为ScrollView实现可拉伸的粘性头部？

需求背景 #

我需要做一个仅依赖ScrollView、适配懒加载内容的可拉伸粘性头部——向上滚动时头部固定在顶部，向下滚动超出初始位置时能拉伸放大。翻遍Stack Overflow没找到原生SwiftUI的解决方案，就自己实现了一套，分享给有需要的人。

现有方案的问题 #

之前看到过一篇相关文章，但原方案缺陷明显，不推荐用：

• 代码冗余复杂，堆了大量没必要的计算逻辑
• 过度绑定安全区域，适配场景太窄
• 基于offset实现，容易出现布局和交互不一致的问题
• 本身不带粘性效果，要实现头部固定还得额外加代码

原生代码的局限 #

SwiftUI默认用LazyVStack的pinnedViews能实现头部粘性，但没法支持拉伸，示例代码如下：

ScrollView {
    LazyVStack(spacing: 8, pinnedViews: [.sectionHeaders]) {
        Section {
            ForEach(0...100) {
                Text("Item \($0)")
                    .frame(maxWidth: .infinity, minHeight: 60)
            }
        } header: {
           Image("picture").resizable().scaledToFill()
               .frame(height: 200)
        }
    }
}

这段代码里的头部向上滚动时会固定，但向下滚动时只会跟着内容拖动，没有拉伸效果。

我的实现方案 #

下面是我写的可拉伸粘性头部代码，核心是用GeometryReader监听滚动偏移，结合scaleEffect和frame调整头部尺寸，同时保留粘性效果：

struct StretchyHeaderView: View {
    @State private var scrollOffset: CGFloat = 0
    
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 8, pinnedViews: [.sectionHeaders]) {
                Section {
                    ForEach(0...100) { index in
                        Text("Item \(index)")
                            .frame(maxWidth: .infinity, minHeight: 60)
                            .background(Color.white)
                            .cornerRadius(8)
                            .shadow(radius: 2)
                    }
                } header: {
                    GeometryReader { geo in
                        Image("picture")
                            .resizable()
                            .scaledToFill()
                            .frame(height: max(200, 200 - scrollOffset))
                            .scaleEffect(max(1, 1 + scrollOffset / 200))
                            .clipped()
                            .onChange(of: geo.frame(in: .global).minY) { newValue in
                                scrollOffset = newValue > 0 ? newValue : 0
                            }
                    }
                    .frame(height: 200)
                }
            }
            .padding()
        }
    }
}

struct StretchyHeaderView_Previews: PreviewProvider {
    static var previews: some View {
        StretchyHeaderView()
    }
}

代码说明 #

• 用GeometryReader获取头部在全局坐标系的位置，通过监听minY值判断滚动方向
• 向下滚动（minY > 0）时，用scrollOffset计算拉伸比例，通过scaleEffect放大图片，同时调整frame高度让图片显示更多内容
• 向上滚动时，scrollOffset重置为0，头部恢复原尺寸，依靠pinnedViews保持粘性
• 用clipped()避免图片拉伸后超出边界

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