SwiftUI中如何搭配TabView使用.fixedSize()让其仅占用所需空间

TabView（特别是page样式的）的布局逻辑和VStack完全不同：VStack会主动计算所有子视图的总尺寸作为自身的固有内容大小，所以fixedSize()可以直接让VStack收缩到刚好适配内容的尺寸。但TabView默认会优先填充父视图提供的所有可用空间，自身不会根据子页面的内容计算固有大小，因此直接加fixedSize()会让TabView收缩到系统预设的最小默认尺寸，导致内容被挤压遮挡。

核心思路是手动监听所有Tab子页面的尺寸，取最大值主动设置给TabView，就能实现整体刚好适配内容的效果，完整实现代码如下：

import SwiftUI

// 定义PreferenceKey用于获取子视图尺寸
struct ViewSizeKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    // 取所有子视图的最大尺寸作为最终值
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        let nextSize = nextValue()
        value.width = max(value.width, nextSize.width)
        value.height = max(value.height, nextSize.height)
    }
}

struct ContentView: View {
    // 存储Tab内容的最大尺寸
    @State private var tabContentSize: CGSize = .zero
    
    var body: some View {
        ZStack {
            Color.red
            
            TabView {
                VStack {
                    Text("One")
                    Text("One")
                    Text("One")
                }
                // 每个Tab页面都添加尺寸监听
                .background(GeometryReader { proxy in
                    Color.clear.preference(key: ViewSizeKey.self, value: proxy.size)
                })
                
                VStack {
                    Text("Two")
                    Text("Two")
                    Text("Two")
                }
                .background(GeometryReader { proxy in
                    Color.clear.preference(key: ViewSizeKey.self, value: proxy.size)
                })
                
                VStack {
                    Text("Three")
                    Text("Three")
                    Text("Three")
                }
                .background(GeometryReader { proxy in
                    Color.clear.preference(key: ViewSizeKey.self, value: proxy.size)
                })
            }
            .tabViewStyle(.page)
            // 把计算出的最大尺寸设置给TabView
            .frame(width: tabContentSize.width, height: tabContentSize.height)
        }
        // 监听Tab内容尺寸变化
        .onPreferenceChange(ViewSizeKey.self) { newSize in
            tabContentSize = newSize
        }
        .fixedSize()
    }
}

• 如果Tab页面的内容是动态可变的，这个方案也能自动适配尺寸变化，不需要手动更新
• 如果需要保留页面指示器的显示空间，可以给计算出的tabContentSize的高度加上固定偏移量，比如height: tabContentSize.height + 30，避免指示器遮挡内容

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