SwiftUI：如何获取PageTabViewStyle的TabView未显示视图最大高度？

PageTabViewStyle默认仅渲染当前显示的页面，未展示的视图不会加载，这就导致你原来依赖GeometryReader收集高度的方案只能在滑动后更新TabView高度。针对这个问题，分两种场景给出解决方案：

场景1：子视图高度可预先计算 #

如果子视图的高度是有明确计算公式或固定规则的（比如你示例中的100 + CGFloat(30 * element)），直接提前算出最大高度即可，无需等待视图渲染：

struct ContentView: View {
    let colors: [Color] = [.red, .green, .blue, .gray, .teal]
    let elements = [0, 1, 2, 3, 4]
    
    // 预先计算所有子视图的最大高度
    let maxHeight: CGFloat = {
        let elements = [0,1,2,3,4]
        return elements.reduce(0) { currentMax, element in
            max(currentMax, 100 + CGFloat(30 * element))
        }
    }()

    var body: some View {
        VStack(spacing: 0) {
            TabView {
                ForEach(elements, id: \.self) { element in
                    HStack {
                        Spacer()
                        Text("\(element)")
                            .font(.title)
                        Spacer()
                    }
                    .frame(height: 100 + CGFloat(30 * element))
                    .background(colors[element])
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .automatic))
            .frame(height: maxHeight)

            ScrollView {
                VStack(spacing: 0) {
                    Color.white.frame(height: 100)
                    Color.purple.frame(height: 200)
                    Color.orange.frame(height: 300)
                }
            }
        }
    }
}

场景2：子视图高度无法预先计算（动态内容） #

如果子视图高度是动态的（比如根据文本长度自动适配、加载远程数据等），需要强制预加载所有子视图，让GeometryReader收集到所有高度后再设置TabView：

struct ContentView: View {
    let colors: [Color] = [.red, .green, .blue, .gray, .teal]
    let elements = [0, 1, 2, 3, 4]
    @State var maxHeight: CGFloat = .zero

    // 封装子视图为可复用组件
    func pageView(for element: Int) -> some View {
        HStack {
            Spacer()
            Text("\(element)")
                .font(.title)
            Spacer()
        }
        .frame(height: 100 + CGFloat(30 * element))
        .background(colors[element])
        .background(
            GeometryReader { geometry in
                Color.clear.preference(
                    key: TabViewHeightKey.self,
                    value: geometry.size.height
                )
            }
        )
    }

    var body: some View {
        VStack(spacing: 0) {
            TabView {
                ForEach(elements, id: \.self) { element in
                    pageView(for: element)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .automatic))
            .frame(height: maxHeight)

            ScrollView {
                VStack(spacing: 0) {
                    Color.white.frame(height: 100)
                    Color.purple.frame(height: 200)
                    Color.orange.frame(height: 300)
                }
            }
        }
        // 通过overlay预加载所有子视图到不可见区域
        .overlay(
            VStack {
                ForEach(elements, id: \.self) { element in
                    pageView(for: element)
                }
            }
            .opacity(0)
            .frame(width: 0, height: 0)
        )
        .onPreferenceChange(TabViewHeightKey.self) { newHeight in
            maxHeight = max(maxHeight, newHeight)
        }
    }
}

struct TabViewHeightKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue = CGFloat.zero
    static func reduce(value: inout Value, nextValue: () -> Value) {
        value = max(value, nextValue())
    }
}

核心原理 #

• PageTabViewStyle默认懒加载页面，未显示的视图不会触发GeometryReader的高度收集；
• 预加载方案通过overlay将所有子视图渲染在屏幕外（宽高设为0、透明度0），确保所有视图的GeometryReader都能触发，PreferenceKey就能收集到所有高度并取最大值，最终同步给TabView。

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