SwiftUI忽略安全区底部边缘布局失效问题及非GeometryReader解决方案

问题重现 #

在watchOS/iOS开发中，当视图尺寸略大于安全区时，直接给视图添加.ignoresSafeArea(edges: .bottom)会失效，底部元素无法贴到屏幕底部；只有将视图包裹在GeometryReader中才能得到预期效果，但GeometryReader有额外布局开销，在不需要几何信息的场景下没必要使用。

成因分析 #

SwiftUI的布局系统遵循父容器约束优先的规则：

• 直接给HigherThanSafeAreaView添加.ignoresSafeArea(edges: .bottom)时，父容器的默认尺寸是安全区范围。视图的理想尺寸（214点）虽超过安全区高度（177点），但父容器不会主动扩展到全屏，因此VStack中的Spacer只能在安全区范围内拉伸，导致底部矩形无法抵达屏幕底部。
• GeometryReader的作用是提供一个全屏尺寸的父容器，它会强制子视图使用全屏空间布局，此时Spacer可以拉伸填满全屏剩余空间，让底部矩形贴到屏幕底部。

无GeometryReader的解决方法 #

方法1：使用frame(maxHeight: .infinity) #

通过强制视图占满父容器的最大可用高度，配合ignoresSafeArea实现全屏布局：

struct FixedViewWithoutGeometryReader: View {
    var body: some View {
        HigherThanSafeAreaView()
            .frame(maxHeight: .infinity) // 强制视图扩展到父容器最大高度
            .ignoresSafeArea(edges: .bottom)
    }
}

方法2：使用containerRelativeFrame（iOS 16+/watchOS 9+） #

针对高版本系统，用containerRelativeFrame直接让视图占满垂直方向的容器空间：

struct FixedViewWithoutGeometryReader: View {
    var body: some View {
        HigherThanSafeAreaView()
            .containerRelativeFrame(.vertical) // 占满垂直方向全屏空间
            .ignoresSafeArea(edges: .bottom)
    }
}

效果对比 #

• 异常效果（未修复）：
  
• 预期效果（修复后）：
  

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