SwiftUI TabView动态高度适配问题：展开折叠后无法自动收缩

问题根源分析 #

你的代码存在几个关键问题导致折叠详情时高度无法收缩：

1. Spacer() 强制撑高：SinglePhotoView 里的 Spacer() 会让 VStack 始终撑满父容器可用空间，折叠详情后依然保留多余高度。
2. ID 绑定不匹配：.id(viewModel.showPersonalityDetails) 绑定的状态和展开/收起的 showDetails1 不一致，导致视图状态变化时没有触发重新布局计算。
3. TabView 高度更新不及时：PageTabViewStyle 下只有当前显示的页面会触发 GeometryReader 的高度计算，但折叠详情时没有主动触发当前页面的高度重新计算。

修复方案及代码修改 #

1. 补充 PreferenceKey 定义（原代码缺失）

首先确保你有正确的 ViewHeightKey 定义：

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

2. 修改 SinglePhotoView 核心代码

移除 Spacer，修正 ID 绑定，确保高度计算准确：

struct SinglePhotoView: View {
    @ObservedObject var viewModel: MyCustomViewModel
    let index: Int
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) { // 明确spacing让布局更可控
            if index < viewModel.profileImages.count {
                Image(uiImage: viewModel.profileImages[index])
                    .resizable()
                    .scaledToFit()
                    .frame(maxWidth: .infinity, minHeight: 300, maxHeight: 300)
                    .cornerRadius(10)
                    .shadow(radius: 5)
                    .padding(.horizontal)
            }
            
            if index < viewModel.optimizerResults.data.photos.count {
                let photo = viewModel.optimizerResults.data.photos[index]
                let recommendation = photo.recommendation
                let detailedRecommendation = viewModel.optimizerResults.data.photosDetailed[index]
                
                VStack(alignment: .leading, spacing: 12) {
                    Text("Overall score")
                        .font(.title)
                    ProgressBarColored() // 原代码两个分支逻辑一致，直接简化
                    if recommendation.keep == 0 {
                        Text("Replace this image")
                            .foregroundColor(.red)
                            .font(.headline)
                    }
                    
                    if viewModel.showDetails1 {
                        VStack(spacing: 8) {
                            SingleProgressResult(<some attributes>)
                            SingleProgressResult(<some attributes>)
                            SingleProgressResult(<some attributes>)
                            SingleProgressResult(<some attributes>)
                        }
                        .padding(.vertical)
                    }
                    Divider()
                }
                .padding(.horizontal)
                .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
        .background(GeometryReader { geometry in
            Color.clear.preference(key: ViewHeightKey.self, value: geometry.size.height)
        })
        .onPreferenceChange(ViewHeightKey.self) { height in
            // 仅当前选中的页面更新TabView高度，避免冲突
            if index == viewModel.selectedIndex {
                viewModel.tabViewHeight = height
            }
        }
        .id(viewModel.showDetails1) // 绑定到正确的展开状态，触发视图重建
        .padding(.horizontal)
    }
}

3. 优化 MyCustomView 和 ViewModel

确保 TabView 的高度动画流畅，ViewModel 初始化默认高度：

// ViewModel 示例
class MyCustomViewModel: ObservableObject {
    @Published var profileImages: [UIImage] = []
    @Published var selectedIndex = 0
    @Published var tabViewHeight: CGFloat = 300 // 初始值设为图片高度
    @Published var showDetails1 = false
    // 其他属性...
}

struct MyCustomView: View {
    @ObservedObject var viewModel: MyCustomViewModel
    
    var body: some View {
        VStack {
            if viewModel.profileImages.isEmpty {
                Text("No images available.")
                    .foregroundColor(.gray)
            } else {
                TabView(selection: $viewModel.selectedIndex) {
                    ForEach(viewModel.profileImages.indices, id: \.self) { index in
                        SinglePhotoView(viewModel: viewModel, index: index)
                            .tag(index)
                    }
                }
                .tabViewStyle(PageTabViewStyle())
                .frame(height: viewModel.tabViewHeight)
                .animation(.easeInOut(duration: 0.3), value: viewModel.tabViewHeight) // 绑定动画到高度变化
                .onChange(of: viewModel.selectedIndex) { _ in
                    // 切换Tab时触发视图更新，确保高度计算准确
                    DispatchQueue.main.async {
                        viewModel.objectWillChange.send()
                    }
                }
            }
        }
        .padding()
    }
}

关键修改说明 #

• 移除 Spacer：让 VStack 完全根据内容自适应高度，折叠详情后自然收缩。
• ID 绑定到 showDetails1：状态变化时强制视图重建，触发 GeometryReader 重新计算高度。
• 仅当前选中页更新高度：避免多页面同时修改 tabViewHeight 导致的冲突。
• 动画绑定到高度值：让高度变化更平滑，提升用户体验。

内容的提问来源于stack exchange，提问作者S. L.