SwiftUI嵌套ScrollView高度异常求助：多Tab内容显示异常

问题核心 #

外层纵向ScrollView会以初始渲染的第一个Tab页高度作为自身内容高度的参考，切换到内容更高的第二个Tab时，因高度未动态调整导致内容截断、布局错乱。

解决方案思路 #

让外层ScrollView能实时感知当前活跃Tab的内容高度，动态调整自身可滚动区域的高度。

具体实现步骤 #

1. 定义状态变量追踪高度

先声明用于存储每个Tab内容高度的状态，以及当前活跃Tab的索引：

@State private var activeTabIndex = 0
@State private var mainPhotosHeight: CGFloat = 0
@State private var cosplayPhotosHeight: CGFloat = 0

// 计算当前Tab的高度
private var currentTabHeight: CGFloat {
    activeTabIndex == 0 ? mainPhotosHeight : cosplayPhotosHeight
}

2. 用PreferenceKey精准监听Tab内容高度

相比直接用GeometryReader的onAppear，PreferenceKey能更可靠地捕获内容动态变化后的高度（比如异步加载图片后的高度更新）：

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

3. 为每个Tab页绑定高度监听

在两个基于LazyVGrid实现的Tab页中，添加高度监听逻辑：

// prepareUserMainPhotos 实现
LazyVGrid(columns: yourGridColumns) {
    // 你的照片内容布局
}
.background(
    GeometryReader { proxy in
        Color.clear
            .preference(key: ContentHeightPreferenceKey.self, value: proxy.size.height)
    }
)
.onPreferenceChange(ContentHeightPreferenceKey.self) { newValue in
    mainPhotosHeight = newValue
}

// prepareCosplayUserPhotos 同理
LazyVGrid(columns: yourGridColumns) {
    // 你的Cosplay照片内容布局
}
.background(
    GeometryReader { proxy in
        Color.clear
            .preference(key: ContentHeightPreferenceKey.self, value: proxy.size.height)
    }
)
.onPreferenceChange(ContentHeightPreferenceKey.self) { newValue in
    cosplayPhotosHeight = newValue
}

4. 动态设置外层ScrollView中userPhotos的高度

在外层纵向ScrollView里，给userPhotos组件添加frame修饰符，绑定当前活跃Tab的高度：

ScrollView(.vertical) {
    userInfoView()
    CustomTabBar(selectedIndex: $activeTabIndex)
    userPhotos(selectedIndex: activeTabIndex)
        .frame(height: currentTabHeight)
}

关键注意点 #

• 如果Tab内的内容是动态加载（比如分页加载图片），PreferenceKey会自动捕获高度变化，无需额外处理
• 确保CustomTabBar的选中索引和activeTabIndex双向绑定，保证currentTabHeight能实时切换

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