SwiftUI中如何让嵌套ScrollView内的Section Header固定在视图顶部？

问题描述 #

想要在垂直滚动时把内层ScrollView里的标题固定在页面顶部，但当前代码里的pinnedViews: .sectionHeaders只能固定最近一层（内层水平ScrollView）的视图，没法在外层垂直滚动时保持顶部固定。

当前代码示例：

ScrollView([.vertical]) {
    LazyVStack(alignment: .leading, pinnedViews: .sectionHeaders) {
        ForEach(...) {
            ScrollView([.horizontal]) {
                LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                    Section {
                       ...
                    } header: {
                       ... // <-- 需要固定到顶部的标题
                    }
                }
            }
        }
    }
}

解决方案 #

方案1：将标题移至外层垂直结构（推荐） #

把需要固定的标题从内层水平ScrollView中抽出来，作为外层LazyVStack的SectionHeader，借助外层的pinnedViews实现垂直滚动时的顶部固定：

ScrollView([.vertical]) {
    LazyVStack(alignment: .leading, pinnedViews: .sectionHeaders) {
        ForEach(...) { item in
            Section {
                ScrollView([.horizontal]) {
                    LazyVStack(spacing: 0) {
                        ... // 原Section内的内容
                    }
                }
            } header: {
                ... // 放置需要固定的标题
            }
        }
    }
}

方案2：自定义滚动监听实现固定 #

如果无法调整原有结构，可以通过GeometryReader监听外层滚动偏移，手动控制标题位置：

struct ContentView: View {
    @State private var scrollOffset: CGFloat = 0
    
    var body: some View {
        ScrollView([.vertical]) {
            GeometryReader { proxy in
                Color.clear.preference(key: ScrollOffsetKey.self, value: proxy.frame(in: .global).minY)
            }
            .frame(height: 0)
            
            LazyVStack(alignment: .leading) {
                ForEach(...) {
                    ScrollView([.horizontal]) {
                        LazyVStack(spacing: 0) {
                            ... // 内容部分
                        }
                    }
                }
            }
        }
        .overlay(alignment: .top) {
            YourHeaderView()
                .offset(y: max(0, -scrollOffset))
                .background(Color.white) // 避免被下方内容遮挡
        }
        .onPreferenceChange(ScrollOffsetKey.self) { value in
            scrollOffset = value
        }
    }
}

// 自定义PreferenceKey监听滚动偏移
struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {}
}

说明 #

• 方案1利用SwiftUI原生的pinnedViews机制，代码简洁且性能更优，优先推荐使用。
• 方案2适合无法调整结构的场景，但需要手动处理滚动偏移和遮挡问题，记得给标题添加背景色防止内容穿透。

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