SwiftUI中ScrollTo(id:)滚动内容覆盖固定Header的解决方法求助

问题根源在于Section的固定Header是悬浮在ScrollView内容之上的，调用scrollTo(id: 20, anchor: .top)时，Item 20的顶部会对齐到ScrollView可视区域的顶部，而固定Header会覆盖该区域，最终导致两者重叠。

解决方案：手动实现固定Header #

放弃使用Section的pinnedViews，改为通过垂直布局固定Header，并给ScrollView内容添加与Header高度匹配的顶部内边距，让ScrollTo的锚点自动避开Header区域。

修改后的完整代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
      FirstTabView()
    }
}

// 用于传递Header高度的PreferenceKey
struct HeaderHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct FirstTabView: View {
    let items = (0..<40)
    @State private var headerHeight: CGFloat = 0
    
    var body: some View {
        ScrollViewReader(content: { proxy in
            VStack(spacing: 0) {
                // 固定在顶部的Header
                header()
                    .background(Color.white) // 防止内容透过Header显示
                    .overlay(
                        GeometryReader { geo in
                            Color.clear
                                .preference(key: HeaderHeightKey.self, value: geo.size.height)
                        }
                    )
                    .onTapGesture {
                        proxy.scrollTo(20, anchor: .top)
                    }
                
                ScrollView {
                    LazyVStack {
                        // 添加与Header高度一致的顶部空白，避免ScrollTo时内容被遮挡
                        Color.clear.frame(height: headerHeight)
                        
                        ForEach(items, id: \.self) { item in
                            Text("Item is \(item)")
                                .frame(width: UIScreen.main.bounds.width, height: 44)
                                .padding(.horizontal)
                                .background(Color.red)
                                .id(item)
                        }
                    }
                }
                .frame(width: UIScreen.main.bounds.width)
            }
            // 获取Header的实际高度
            .onPreferenceChange(HeaderHeightKey.self) { height in
                headerHeight = height
            }
        })
    }
  
    func header() -> some View {
        HStack {
            Text("Header")
                .bold()
            Spacer()
        }.padding([.top,.bottom])
    }
}

关键逻辑说明 #

1. 固定Header布局：通过VStack将Header与ScrollView垂直排列，Header自然固定在界面顶部。
2. 动态获取Header高度：利用GeometryReader和自定义PreferenceKey获取Header的实际渲染高度，避免硬编码高度带来的适配问题。
3. 内容偏移处理：在ScrollView内容最上方添加与Header高度一致的空白视图，确保调用scrollTo时，目标Item的顶部会对齐到Header下方的位置，不会被遮挡。
4. 背景遮挡处理：给Header添加白色背景，防止ScrollView的内容透过Header显示。

备选方案（保留Section固定Header） #

如果必须保留Section的pinnedViews，可以通过获取底层UIScrollView实例调整contentOffset解决，但需要依赖第三方库（如Introspect）：

1. 引入Introspect库，获取ScrollView对应的UIScrollView实例。
2. 调用scrollTo后，将UIScrollView的contentOffset.y增加Header的高度，手动偏移滚动位置。

该方案需要额外引入依赖，不如手动固定Header的方案简洁可靠。

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