SwiftUI中如何让图片适配动态刘海区域？

问题根源 #

你的代码存在以下几个导致刘海图片无法贴合的问题：

• 直接依赖UIScreen.main.bounds无法精准适配不同设备的安全区域高度差异
• 刘海图片使用.aspectRatio(contentMode: .fit)会保持原比例，无法填充刘海区域
• 未利用系统提供的安全区域inset来动态匹配刘海高度

修正后的代码 #

ZStack {
    // 全屏背景图
    Image("bgImage")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .ignoresSafeArea()

    // 适配动态刘海的图片
    GeometryReader { proxy in
        Image("notch")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: proxy.size.width, height: proxy.safeAreaInsets.top)
            .clipped()
    }
    .ignoresSafeArea(edges: .top)
}

关键优化点 #

• 动态获取刘海高度：通过GeometryReader的proxy.safeAreaInsets.top自动获取当前设备的顶部安全区域高度（即刘海+状态栏的总高度），完美适配不同机型的动态刘海
• 图片填充方式：将刘海图片的contentMode改为.fill，配合.clipped()确保图片完全填充指定的刘海区域，不会留白或变形
• 简化布局层级：移除不必要的VStack和硬编码的frame，利用SwiftUI的布局系统自动适配，代码更简洁可靠
• 安全的图片加载：使用SwiftUI原生的Image("name")替代强制解包的UIImage，避免空图片崩溃

额外注意事项 #

确保你的notch图片的视觉元素集中在顶部区域，.fill+.clipped会自动裁剪掉超出刘海高度的部分，保证只显示适配刘海的内容。

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