SwiftUI实现与设备屏幕圆角匹配的全屏偏移视图方案

要让偏移后的视图圆角和设备屏幕完全对齐，核心是动态获取系统原生圆角半径，并通过自定义裁剪区域匹配屏幕的圆角曲线，而非硬编码固定值。以下是具体实现方案：

关键思路 #

1. 动态适配设备圆角：不同iOS设备的屏幕圆角尺寸存在差异，通过系统API获取原生半径并转换为逻辑坐标值，彻底解决硬编码的适配问题。
2. 同步裁剪与视图偏移：当视图发生偏移时，反向偏移裁剪形状，确保视图的圆角曲线与屏幕圆角的位置、半径完全重合。

完整代码实现 #

import SwiftUI

struct ContentView: View {
    // 动态计算当前设备的屏幕圆角半径（适配逻辑坐标）
    private var screenCornerRadius: CGFloat {
        let nativeRadius = UIScreen.main.nativeBounds.cornerRadius
        let scale = UIScreen.main.scale
        return nativeRadius / scale
    }
    
    var body: some View {
        GeometryReader { geometry in
            let horizontalOffset: CGFloat = 20 // 自定义水平偏移量
            
            ZStack {
                Color.blue // 全屏内容载体
            }
            // 用系统一致的圆角样式裁剪视图
            .clipShape(
                RoundedRectangle(
                    cornerRadius: screenCornerRadius,
                    style: .continuous // 匹配系统默认的连续圆角曲线
                )
                .offset(x: -horizontalOffset) // 反向偏移裁剪区域，保证圆角对齐屏幕
            )
            .offset(x: horizontalOffset) // 视图的水平偏移
        }
        .edgesIgnoringSafeArea(.all) // 确保视图铺满全屏（含安全区外区域）
    }
}

代码细节说明 #

• 动态圆角计算：screenCornerRadius通过UIScreen.main.nativeBounds.cornerRadius获取物理屏幕的原生圆角半径，再除以屏幕缩放比例，得到SwiftUI逻辑坐标下的准确值，完美适配所有iOS设备。
• 裁剪与偏移同步：视图向右偏移horizontalOffset时，裁剪形状向左偏移相同数值，让视图的圆角边缘和屏幕的圆角曲线完全重合，不会出现错位。
• 连续圆角样式：.continuous参数让圆角过渡效果和系统屏幕保持一致，避免出现生硬的直角转折。

若需添加垂直偏移，只需同步调整裁剪形状和视图的y轴偏移量即可。

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