SwiftUI如何在带PinnedViews的ScrollView中嵌入分页TabView

问题场景 #

基于ScrollView+LazyVStack的pinnedViews: .sectionHeaders能力，实现了包含顶部头区域、吸顶Section头的垂直滚动布局，初始可正常运行的代码如下：

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                Section {
                    Text("Header")
                        .frame(maxWidth: .infinity, minHeight: 300)
                        .background(Color.red)
                }

                Section {
                    LazyVStack {
                        ForEach(0...100, id: \.hashValue) { num in
                            Text("\(num)")
                        }
                    }
                } header: {
                    ZStack {
                        Color.black.ignoresSafeArea()

                        Text("Section Header")
                            .frame(maxWidth: .infinity, minHeight: 50)
                            .background(Color.black)
                    }
                }
            }
        }
    }
}

初始版本运行效果：

在Section内容区嵌入TabView尝试实现水平分页滚动时，修改后的代码运行后内容区域完全空白，异常代码如下：

struct ContentView: View {
    @State private var currentIndex = 0

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                Section {
                    Text("Header")
                        .frame(maxWidth: .infinity, minHeight: 300)
                        .background(Color.red)
                }

                Section {

                    TabView(selection: $currentIndex) {
                        LazyVStack {
                            ForEach(0...100, id: \.hashValue) { num in
                                Text("A: \(num)")
                            }
                        }
                        .tag(0)

                        LazyVStack {
                            ForEach(0...100, id: \.hashValue) { num in
                                Text("B: \(num)")
                            }
                        }
                        .tag(1)
                    }

                } header: {
                    ZStack {
                        Color.black.ignoresSafeArea()

                        Text("Section Header")
                            .frame(maxWidth: .infinity, minHeight: 50)
                            .background(Color.black)
                    }
                }
            }
        }
    }
}

异常版本运行效果：

核心诉求：保留吸顶效果的前提下，实现内容区域的水平分页滚动。

问题原因 #

出现内容不渲染的核心原因有两个：

• 未给TabView显式声明分页样式：系统默认的TabView是底部标签栏样式，不会做水平分页布局
• 布局约束缺失：TabView放在LazyVStack中时，无法通过内部懒加载的子视图自动推算自身高度，默认高度为0，导致内部内容无法显示；同时如果直接在TabView内放LazyVStack，会和外层垂直ScrollView产生滚动手势冲突，进一步导致布局异常。

修正方案 #

按照以下逻辑调整即可实现需求：

1. 给TabView显式应用.tabViewStyle(.page)启用水平分页样式
2. 通过GeometryReader读取可用布局尺寸，给TabView设置明确高度，避免高度为0的问题
3. 每个分页内部嵌套独立的ScrollView承载列表内容，和外层滚动容器做手势隔离，避免滚动冲突
4. 吸顶逻辑完全保留原有LazyVStack的pinnedViews能力，不需要额外自定义吸顶实现

修正后可直接运行的代码：

struct ContentView: View {
    @State private var currentIndex = 0
    
    var body: some View {
        GeometryReader { outerProxy in
            ScrollView {
                LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                    Section {
                        Text("Header")
                            .frame(maxWidth: .infinity, minHeight: 300)
                            .background(Color.red)
                    }

                    Section {
                        TabView(selection: $currentIndex) {
                            // 分页A
                            ScrollView {
                                LazyVStack {
                                    ForEach(0...100, id: \.self) { num in
                                        Text("A: \(num)")
                                            .frame(maxWidth: .infinity, minHeight: 60)
                                    }
                                }
                            }
                            .tag(0)
                            
                            // 分页B
                            ScrollView {
                                LazyVStack {
                                    ForEach(0...100, id: \.self) { num in
                                        Text("B: \(num)")
                                            .frame(maxWidth: .infinity, minHeight: 60)
                                    }
                                }
                            }
                            .tag(1)
                        }
                        .tabViewStyle(.page(indexDisplayMode: .never))
                        // 给TabView设置明确高度：匹配吸顶后剩余可用屏幕高度
                        .frame(height: outerProxy.size.height - outerProxy.safeAreaInsets.top)
                    } header: {
                        ZStack {
                            Color.black.ignoresSafeArea()
                            Text("Section Header")
                                .foregroundColor(.white)
                                .frame(maxWidth: .infinity, minHeight: 50)
                                .background(Color.black)
                        }
                    }
                }
            }
        }
    }
}

实现效果说明：向上滚动时顶部红色头图随滚动上移，黑色SectionHeader到达顶部后自动吸顶；吸顶后下方区域可左右滑动切换分页，每个分页内的列表可独立垂直滚动，不会和外层滚动冲突。如果需要显示分页指示器，删除.tabViewStyle中的indexDisplayMode: .never参数即可。

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