SwiftUI实现嵌套滚动视图：如何固定横向区域表头？

问题原因 #

你当前的代码中，右侧横向区域的表头被嵌套在ScrollView(.horizontal)内部的LazyVStack中，而整个横向滚动视图又处于外层垂直ScrollView的HStack里。当外层垂直滚动时，整个横向区域（包括表头）会跟着一起移动，无法实现垂直方向的固定效果。

解决方案 #

通过拆分表头与内容结构、同步左右垂直滚动的方式实现需求：

struct ContentView: View {
    // 绑定左右垂直滚动的偏移量，实现同步滚动
    @State private var verticalOffset: CGFloat = 0
    
    var body: some View {
        VStack(spacing: 0) {
            // 顶部固定表头行
            HStack(spacing: 0) {
                // 左侧固定表头
                Text("Header One")
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(.gray)
                    .padding(.vertical, 8)
                
                // 右侧横向可滚动表头
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 0) {
                        Text("a").frame(width: 80)
                        Text("b").frame(width: 80)
                        Text("d").frame(width: 100)
                        Text("i").frame(width: 80)
                        Text("e").frame(width: 80)
                        Text("f").frame(width: 100)
                        Text("g").frame(width: 100)
                        Text("h").frame(width: 100)
                    }
                    .font(.caption)
                    .foregroundColor(.gray)
                    .padding(.vertical, 8)
                    .background(Color.gray.opacity(0.1))
                }
            }
            .font(.title2)
            
            // 内容区域：左右两栏同步垂直滚动
            HStack(spacing: 0) {
                // 左侧垂直滚动列表
                ScrollView {
                    LazyVStack(alignment: .leading) {
                        ForEach(0..<20) { item in
                            Text("Item \(item)")
                                .padding(.vertical, 8)
                        }
                    }
                }
                .background(Color.white)
                .scrollPosition(id: $verticalOffset, anchor: .top)
                
                // 右侧横向+垂直滚动内容区
                ScrollView {
                    ScrollView(.horizontal, showsIndicators: false) {
                        LazyVStack(alignment: .leading, spacing: 0) {
                            ForEach(0..<20) { row in
                                HStack(spacing: 0) {
                                    ForEach(0..<8) { col in
                                        Text("Row \(row) Col \(col)")
                                            .frame(width: [80,80,100,80,80,100,100,100][col])
                                            .padding(.vertical, 8)
                                    }
                                }
                            }
                        }
                    }
                }
                .background(Color.white)
                .scrollPosition(id: $verticalOffset, anchor: .top)
            }
        }
        .padding()
    }
}

关键调整点 #

• 分离固定表头：将表头从滚动内容中提取到顶部独立的VStack行，确保垂直滚动时表头保持固定。
• 同步垂直滚动：使用scrollPosition绑定左右两个垂直滚动视图的偏移量，保证两边内容滚动节奏一致。
• 独立横向滚动：右侧表头和内容分别使用横向滚动视图，实现表头随内容横向滚动、垂直方向固定的效果。

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