SwiftUI问题：ScrollView嵌套TabView内容不显示的修复方案

问题场景 #

在SwiftUI中将TabView嵌套进ScrollView后，TabView内的内容无法正常显示（内容实际存在但布局上不可见），且TabView的内容高度是动态变化的，不能依赖固定高度值来适配。

问题代码 #

原实现代码如下：

import SwiftUI

struct SwiftUIView: View {
    @State var selectedFilter = 1
    var body: some View {
        VStack {
            Color.blue.frame(height: 85) // 头部
            ScrollView {
                LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                    Color.green.frame(height: 100) // 主体视图
                    
                    // 红色区域是TabView的头部
                    Section(header: Color.red.frame(height: 30)) {
                        // 此处内容无法显示
                        TabView(selection: $selectedFilter) {
                            Color.yellow.frame(height: 800).tag(1)
                            Color.black.frame(height: 800).tag(2)
                            Color.indigo.frame(height: 800).tag(3)
                        }
                    }
                }
            }
        }
    }
}

#Preview {
    SwiftUIView()
}

解决方案 #

方案1：使用Child Size Reader适配动态高度 #

核心思路是通过Child Size Reader获取TabView当前选中内容的实际高度，再将这个高度赋值给TabView的容器，让ScrollView能正确识别TabView的布局高度。

首先实现Child Size Reader工具：

struct ChildSizeReader<Content: View>: View {
    @Binding var size: CGSize
    let content: () -> Content
    
    var body: some View {
        content()
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .onAppear {
                            size = proxy.size
                        }
                        .onChange(of: proxy.size) { newValue in
                            size = newValue
                        }
                }
            )
    }
}

然后修改原代码，整合Child Size Reader：

import SwiftUI

struct SwiftUIView: View {
    @State var selectedFilter = 1
    @State private var tabContentSize = CGSize.zero
    
    var body: some View {
        VStack {
            Color.blue.frame(height: 85) // 头部
            ScrollView {
                LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                    Color.green.frame(height: 100) // 主体视图
                    
                    // 红色区域是TabView的头部
                    Section(header: Color.red.frame(height: 30)) {
                        TabView(selection: $selectedFilter) {
                            ChildSizeReader(size: $tabContentSize) {
                                Color.yellow.frame(height: 800).tag(1)
                            }
                            ChildSizeReader(size: $tabContentSize) {
                                Color.black.frame(height: 600).tag(2)
                            }
                            ChildSizeReader(size: $tabContentSize) {
                                Color.indigo.frame(height: 1000).tag(3)
                            }
                        }
                        .frame(height: tabContentSize.height)
                    }
                }
            }
        }
    }
}

#Preview {
    SwiftUIView()
}

方案2：自定义Tab切换逻辑替代原生TabView #

如果不想引入额外工具，也可以通过自定义按钮切换内容的方式，直接让动态高度的内容在ScrollView中正常布局，避免原生TabView的布局冲突：

struct SwiftUIView: View {
    @State var selectedFilter = 1
    var body: some View {
        VStack {
            Color.blue.frame(height: 85) // 头部
            ScrollView {
                LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                    Color.green.frame(height: 100) // 主体视图
                    
                    // 红色区域是Tab头部
                    Section(header: Color.red.frame(height: 30)) {
                        VStack {
                            ZStack(alignment: .top) {
                                // 根据选中状态显示对应内容
                                if selectedFilter == 1 {
                                    Color.yellow.frame(height: 5000)
                                } else if selectedFilter == 2 {
                                    Color.green.frame(height: 100)
                                }
                                
                                // 自定义Tab切换按钮
                                HStack(spacing: 20) {
                                    Button("Tab 1") { selectedFilter = 1 }
                                        .foregroundColor(selectedFilter == 1 ? .white : .black)
                                        .padding(.vertical, 8)
                                        .padding(.horizontal, 16)
                                        .background(selectedFilter == 1 ? .blue : .gray.opacity(0.3))
                                        .cornerRadius(8)
                                    
                                    Button("Tab 2") { selectedFilter = 2 }
                                        .foregroundColor(selectedFilter == 2 ? .white : .black)
                                        .padding(.vertical, 8)
                                        .padding(.horizontal, 16)
                                        .background(selectedFilter == 2 ? .blue : .gray.opacity(0.3))
                                        .cornerRadius(8)
                                }
                                .padding(.top, 16)
                            }
                        }
                    }
                }
            }
        }
    }
}

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