SwiftUI嵌套LazyVStack pinnedViews表头重叠问题求助

你遇到的重叠问题，根源是嵌套的LazyVStack各自启用pinnedViews后，两个固定表头的布局逻辑相互独立，内层表头不会自动为外层表头预留空间。以下两种方案可以解决这个问题：

方案一：拆分固定表头，避免嵌套pinnedViews #

直接将外层的"foo"表头作为独立的固定视图放在ScrollView顶部，内层使用单一层级的LazyVStack处理"bar"和"baz"的固定表头，这样两个表头会自然错开：

struct DoublePinnedHeadersView: View {
    var body: some View {
        ScrollView {
            // 外层固定表头，始终固定在顶部
            Text("foo")
                .font(.headline)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding()
                .background(Color.white)
            
            // 内层处理子Section的固定表头
            LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                Section(header: Text("bar")
                    .font(.subheadline)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding()
                    .background(Color.white)
                ) {
                    ForEach(1...20, id: \.self) { num in
                        Text("\(num)")
                            .padding()
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                }
                
                Section(header: Text("baz")
                    .font(.subheadline)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding()
                    .background(Color.white)
                ) {
                    ForEach(1...20, id: \.self) { num in
                        Text("\(num)")
                            .padding()
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                }
            }
        }
    }
}

方案二：通过滚动偏移动态调整内层表头位置 #

如果必须保留嵌套结构，可以通过GeometryReader监听滚动位置，动态给内层表头添加顶部偏移，避免和外层表头重叠：

struct DoublePinnedHeadersView: View {
    @State private var outerHeaderHeight: CGFloat = 0
    @State private var scrollOffset: CGFloat = 0
    
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                Section(header: Text("foo")
                    .font(.headline)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding()
                    .background(Color.white)
                    // 获取外层表头的高度
                    .background(
                        GeometryReader { geo in
                            Color.clear.onAppear {
                                outerHeaderHeight = geo.size.height
                            }
                        }
                    )
                ) {
                    LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                        Section(header: Text("bar")
                            .font(.subheadline)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding()
                            .background(Color.white)
                            // 动态偏移，避免和外层表头重叠
                            .offset(y: max(0, scrollOffset - outerHeaderHeight))
                        ) {
                            ForEach(1...20, id: \.self) { num in
                                Text("\(num)")
                                    .padding()
                                    .frame(maxWidth: .infinity, alignment: .leading)
                            }
                        }
                        
                        Section(header: Text("baz")
                            .font(.subheadline)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding()
                            .background(Color.white)
                            .offset(y: max(0, scrollOffset - outerHeaderHeight))
                        ) {
                            ForEach(1...20, id: \.self) { num in
                                Text("\(num)")
                                    .padding()
                                    .frame(maxWidth: .infinity, alignment: .leading)
                            }
                        }
                    }
                }
            }
        }
        // 监听滚动偏移量
        .background(
            GeometryReader { geo in
                Color.clear.onChange(of: geo.frame(in: .global).minY) { newValue in
                    scrollOffset = -newValue
                }
            }
        )
    }
}

两种方案中，方案一更简洁易维护，推荐优先使用；方案二适合有特殊嵌套需求的场景。

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