如何在SwiftUI中创建多层依次排列的固定视图？

你当前的问题出在嵌套的LazyVStack各自设置了pinnedViews，每个层级的固定Header都会锚定到ScrollView的顶部区域，完全忽略了上层固定Header的高度，最终导致滚动时重叠。

修复方案：统一层级结构+自定义Header偏移 #

放弃嵌套带pinnedViews的LazyVStack，改用单个LazyVStack管理所有Section层级，同时给每个层级的Header添加对应顶部偏移，确保它们依次排列在ScrollView顶部：

// 先定义各层级Header的高度（假设GridCellHeader有固定高度）
enum LayerLevel {
    case firstLayer, secondLayer, thirdLayer
    
    var headerHeight: CGFloat {
        switch self {
        case .firstLayer: return 44
        case .secondLayer: return 40
        case .thirdLayer: return 36
        }
    }
}

struct GridCellHeader: View {
    let title: String
    let level: LayerLevel
    
    var body: some View {
        Text(title)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.leading, level == .firstLayer ? 16 : level == .secondLayer ? 32 : 48)
            .frame(height: level.headerHeight)
            .background(Color.white)
    }
}

// 主视图结构
ScrollView {
    LazyVStack(pinnedViews: [.sectionHeaders]) {
        ForEach(data.firstLayeredViews) { firstLayer in
            Section(
                header: GridCellHeader(title: "Layer 1", level: .firstLayer)
                    .zIndex(3) // 确保最上层Header在视觉顶部
            ) {
                ForEach(firstLayer.secondLayeredViews) { secondLayer in
                    Section(
                        header: GridCellHeader(title: "Layer 2", level: .secondLayer)
                            .padding(.top, LayerLevel.firstLayer.headerHeight)
                            .zIndex(2)
                    ) {
                        ForEach(secondLayer.thirdLayeredViews) { thirdLayer in
                            Section(
                                header: GridCellHeader(title: "Layer 3", level: .thirdLayer)
                                    .padding(.top, LayerLevel.firstLayer.headerHeight + LayerLevel.secondLayer.headerHeight)
                                    .zIndex(1)
                            ) {
                                ForEach(thirdLayer.contents) { content in
                                    Text("Content")
                                        .padding(.vertical, 8)
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

方案说明 #

1. 统一结构：所有Section都放在同一个LazyVStack下，避免嵌套的pinnedViews冲突
2. 顶部偏移：给下层Header添加上层所有Header的总高度作为顶部内边距，让它们固定在下层位置
3. 层级控制：用zIndex确保上层Header始终在视觉层级的顶部，不会被下层遮挡

灵活适配方案：ScrollViewReader动态计算偏移 #

如果Header高度不固定，可以用ScrollViewReader跟踪滚动位置，动态计算每个Header的偏移量，适配动态高度的Header：

struct MultiLevelStickyView: View {
    let data: YourDataModel
    @State private var firstLayerHeaderFrame: CGRect = .zero
    @State private var secondLayerHeaderFrame: CGRect = .zero
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                LazyVStack(pinnedViews: [.sectionHeaders]) {
                    ForEach(data.firstLayeredViews) { firstLayer in
                        Section(
                            header: GridCellHeader(title: "Layer 1", level: .firstLayer)
                                .background(GeometryReader { geo in
                                    Color.clear.onAppear {
                                        firstLayerHeaderFrame = geo.frame(in: .global)
                                    }
                                })
                                .zIndex(3)
                        ) {
                            ForEach(firstLayer.secondLayeredViews) { secondLayer in
                                Section(
                                    header: GridCellHeader(title: "Layer 2", level: .secondLayer)
                                        .offset(y: max(0, (proxy.frame(in: .global)?.minY ?? 0) - firstLayerHeaderFrame.maxY))
                                        .background(GeometryReader { geo in
                                            Color.clear.onAppear {
                                                secondLayerHeaderFrame = geo.frame(in: .global)
                                            }
                                        })
                                        .zIndex(2)
                                ) {
                                    ForEach(secondLayer.thirdLayeredViews) { thirdLayer in
                                        Section(
                                            header: GridCellHeader(title: "Layer 3", level: .thirdLayer)
                                                .offset(y: max(0, (proxy.frame(in: .global)?.minY ?? 0) - secondLayerHeaderFrame.maxY))
                                                .zIndex(1)
                                        ) {
                                            ForEach(thirdLayer.contents) { content in
                                                Text("Content")
                                                    .padding(.vertical, 8)
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

这种方式通过GeometryReader获取Header的全局位置，结合ScrollView的滚动位置动态调整偏移，适配各种高度的Header。

内容的提问来源于stack exchange，提问作者Wouter van de Ven