SwiftUI中如何设置从视图底部到屏幕顶部的固定约束？

问题核心分析 #

你碰到的两个问题本质都是没有利用SwiftUI的安全区域机制适配不同设备的状态栏高度差异，后期的position用法又脱离了SwiftUI的自动布局流，导致容器尺寸失控。

方案一：基于安全区域的精准适配（iOS 14+推荐） #

我们可以通过Environment获取系统的安全区域信息，动态调整椭圆位置，让它在所有设备上都能保持底部对齐安全区域顶部，同时下方文本自动处于椭圆正下方：

@Environment(\.safeAreaInsets) private var safeAreaInsets

public var body: some View {
    VStack(spacing: 0) {
        // 顶部椭圆容器
        ZStack(alignment: .bottom) {
            Ellipse()
                .fill(Color.yellow)
                .frame(width: 546, height: 364)
                // 根据状态栏高度向上偏移，让椭圆底部对齐安全区域顶部
                .offset(y: -safeAreaInsets.top)
            
            Text("Text")
                .padding(.bottom, 42)
                .foregroundColor(.red)
        }
        // 限制容器高度为椭圆高度减去状态栏高度，避免占用多余空间
        .frame(height: 364 - safeAreaInsets.top)
        .edgesIgnoringSafeArea(.top)
        
        // 下方文本自动对齐椭圆底部
        Text("这段文本应该位于黄色形状的正下方，在所有机型上都能正确对齐")
            .padding()
        
        Spacer()
    }
}

方案二：兼容旧版本的简洁布局 #

如果需要支持iOS 14以下，可以直接通过UIApplication获取安全区域信息，逻辑和上面一致：

public var body: some View {
    let statusBarHeight = UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0
    
    VStack(spacing: 0) {
        ZStack(alignment: .bottom) {
            Ellipse()
                .fill(Color.yellow)
                .frame(width: 546, height: 364)
                .offset(y: -statusBarHeight)
            
            Text("Text")
                .padding(.bottom, 42)
                .foregroundColor(.red)
        }
        .frame(height: 364 - statusBarHeight)
        .edgesIgnoringSafeArea(.top)
        
        Text("这段文本应该位于黄色形状的正下方，在所有机型上都能正确对齐")
            .padding()
        
        Spacer()
    }
}

为什么之前的代码出问题？ #

1. 初始代码里ZStack的maxHeight:20是硬编码值，不同设备状态栏高度不同（刘海屏≈44pt，非刘海屏≈20pt），导致偏移后布局错位；
2. 更新后的代码用UIScreen.main.bounds做position，这会让视图脱离SwiftUI的自动布局流，父容器无法正确计算尺寸，看起来ZStack占满了屏幕；
3. SwiftUI的核心是布局流内的约束（padding、alignment、frame），尽量避免直接操作屏幕尺寸或使用脱离布局流的position。

内容的提问来源于stack exchange，提问作者Konstantin.Efimenko