在ScrollView中使用GeometryReader获取屏幕高度失败的解决方法

不用非得依赖UIScreen.main.bounds.size.height，你可以通过把GeometryReader放在ScrollView外部的方式，正确获取屏幕高度后传递给内部子视图，具体实现如下：

核心方案代码 #

struct ScaledScrollViewContent: View {
    var body: some View {
        // 外层GeometryReader获取屏幕/当前可用区域的高度
        GeometryReader { screenGeo in
            ScrollView {
                VStack(spacing: 16) {
                    // 子视图高度设为屏幕高度的60%
                    Color.red
                        .frame(height: screenGeo.size.height * 0.6)
                    
                    // 子视图高度设为屏幕高度的40%
                    Color.blue
                        .frame(height: screenGeo.size.height * 0.4)
                    
                    // 子视图高度设为屏幕高度的80%
                    Color.green
                        .frame(height: screenGeo.size.height * 0.8)
                }
            }
        }
        .ignoresSafeArea() // 根据需求决定是否忽略安全区，比如要占满状态栏区域时开启
    }
}

为什么之前的嵌套方式不行？ #

• 如果把GeometryReader放在ScrollView内部：ScrollView的内容高度初始是不确定的，GeometryReader会试图适配ScrollView的内容容器，导致读取到的高度为0。
• 如果把ScrollView直接嵌套在GeometryReader里但没传递高度：ScrollView默认会占满父视图高度，但子视图没有明确高度时，ScrollView的内容高度依然无法正确计算，最终还是会出现显示异常。

额外说明 #

用外层GeometryReader的好处是，它能获取到当前视图的实际可用高度（比如存在导航栏、tabBar时，会自动扣除这些区域的高度），比UIScreen.main.bounds更贴合实际布局场景。如果需要包含安全区的高度，可以用screenGeo.safeAreaInsets来调整计算逻辑。

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