SwiftUI 自定义视图场景下TabView如何根据内容动态调整高度？

实现方案 #

核心逻辑是通过PreferenceKey捕获每个Tab子视图的真实高度，再根据当前选中的Tab动态绑定TabView的高度，解决GeometryReader默认读取父视图高度的问题。

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

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

步骤2：改造原有TabView代码

新增存储当前Tab高度的状态变量，给每个子视图增加高度捕获逻辑，绑定TabView高度并监听高度变化：

// 新增状态变量
@State private var currentTabHeight: CGFloat = 100 // 可设置合理的初始占位高度避免闪烁

TabView(selection: $selectedTab){
    CustomViewOne()
        .tag(TabHeaderView.Tab.ViewOne)
        // 捕获当前子视图的真实高度
        .background(
            GeometryReader { proxy in
                Color.clear.preference(key: TabContentHeightKey.self, value: proxy.size.height)
            }
        )
    CustomViewTwo()
        .tag(TabHeaderView.Tab.ViewTwo)
        .background(
            GeometryReader { proxy in
                Color.clear.preference(key: TabContentHeightKey.self, value: proxy.size.height)
            }
        )
    CustomViewThree()
        .tag(TabHeaderView.Tab.ViewThree)
        .background(
            GeometryReader { proxy in
                Color.clear.preference(key: TabContentHeightKey.self, value: proxy.size.height)
            }
        )
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
// 动态绑定TabView高度
.frame(height: currentTabHeight)
// 监听子视图高度变化，同步更新TabView高度
.onPreferenceChange(TabContentHeightKey.self) { newHeight in
    withAnimation(.easeInOut) {
        currentTabHeight = newHeight
    }
}

注意事项

• 子视图的动态数据（API返回内容）加载完成后会自动触发高度重计算，不需要额外手动更新高度
• 初始占位高度可以根据业务场景调整，避免首次渲染时高度为0的视觉闪烁
• 不需要给自定义子视图设置任何固定高度约束，高度完全由内部内容决定

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