ScrollView嵌套TabView时子视图高度不生效问题求助

ScrollView里嵌套TabView时，哪怕给子视图设了固定高度，TabView也不会自动展开到对应高度——这是因为ScrollView是无限垂直空间容器，TabView在这种环境下默认会尽可能收缩自身尺寸，不会主动继承子视图的高度。下面是两种解决思路：

方案1：固定高度场景直接给TabView设高度 #

如果子视图高度是确定的（比如你代码里的500），直接给TabView加上frame(height:)即可，和子视图高度保持一致：

struct TabViewProblems: View {
    var body: some View {
        ScrollView {
            TabView(selection: .constant(0)) {
                Color.orange.frame(height: 500)
            }
            .tabViewStyle(.page(indexDisplayMode: .always))
            .frame(height: 500) // 关键：让TabView和子视图高度匹配
        }
    }
}

方案2：自适应内容高度（通用场景） #

如果子视图高度不固定，需要TabView自动适配，可以通过PreferenceKey捕获子视图的实际高度，再同步给TabView：

步骤1：定义高度捕获的PreferenceKey #

struct ContentHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

步骤2：在视图中应用高度捕获 #

struct TabViewProblems: View {
    @State private var contentHeight: CGFloat = 0
    
    var body: some View {
        ScrollView {
            TabView(selection: .constant(0)) {
                // 这里可以替换成任意高度不固定的子视图
                Color.orange
                    .frame(maxHeight: .infinity)
                    .background(
                        // 用GeometryReader捕获子视图高度
                        GeometryReader { proxy in
                            Color.clear
                                .preference(key: ContentHeightKey.self, value: proxy.size.height)
                        }
                    )
            }
            .tabViewStyle(.page(indexDisplayMode: .always))
            .frame(height: contentHeight) // 把捕获到的高度应用给TabView
            .onPreferenceChange(ContentHeightKey.self) { newHeight in
                contentHeight = newHeight
            }
        }
    }
}

补充说明 #

单独使用TabView时，父容器是有限高度（比如屏幕），TabView会自动填充可用空间并尊重子视图高度；但ScrollView的无限垂直空间让TabView失去了高度参考，所以必须显式指定或动态捕获高度。

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