深夜的码农战场，程序员侯佩遭遇了一场诡异的“案发现场”：在 Xcode 的预览中，一部本该完美的 iPhone 14 竟然“秃”了——标志性的刘海凭空消失，取而代之的是平整如柏油马路的安卓感。这不仅是一次 UI 翻车，更是对开发者尊严的挑衅！ 面对一张屏幕区域“黑如深渊”的实心 PNG 资产和不听使唤的圆角穿帮，侯佩化身“像素侦探”，展开了一场脑洞大开的救赎行动。 这不仅是一份技术干货，更是一场关于“优雅偷懒”的视觉欺骗艺术。
🕵️♂️ 引子
夜已深，屏幕上的幽光映在侯佩那张略显疲惫且英俊😎的脸上，把他的黑眼圈衬托得如同国宝大熊猫一般珍贵。
他死死盯着 Xcode 的预览界面，眉头紧锁得能夹死一只蚊子——因为在那里，有一部 iPhone 14，但它“秃”了。 @toc
这是一个关于如何手动打造完美 iPhone 14 锁屏 Mockup 的故事。
原本，侯佩只是想给项目加个简单的锁屏预览功能，展示一下他的设计才华。只不过，iPhone 14 上刘海失踪这桩子事儿决不能忍！
🌪️ 危机降临：刘海去哪儿了？
当他把模型切到 iPhone 14 时，预览画面让他虎躯一震。那个标志性的“刘海”（Notch），竟然凭空蒸发了！屏幕顶部光秃秃的，平整得像刚铺好的柏油马路。
这哪是 iPhone 14？这分明是某些安卓友商的全面屏样机啊！
侯佩查了一圈资料，发现手头现有的工具要么不支持刘海显示，要么配置起来麻烦得要死，足以让任何一个想早点下班的程序员当场去世。
大熊猫不甘心。他手里明明有一张高清无码的 iPhone 14 正面外壳 PNG 图，难道就不能手动把它装上去？这可是程序员的尊严之战啊！
🏰 第一回合：简单粗暴的“叠罗汉”
侯佩的第一反应是直觉式的，也是最朴素的：既然我有图，我有 View，把你俩叠在一起不就完了？就像给煎饼果子加个蛋一样简单。
ZStack {
Image("iPhone14Blue") // 高清外壳图，镇宅之宝
LockScreenMockView() // 辛辛苦苦写的锁屏界面
}
他满怀期待地按下 Cmd+R 刷新预览，仿佛在等待彩票开奖。 结果：一片漆黑。
屏幕里黑洞洞的，伸手不见五指，锁屏界面像被黑洞吞噬了一样，渣都不剩。
侯佩一拍大腿：坏了！原来这张外壳 PNG 的屏幕区域不是透明的，而是纯黑色的实心像素。
把外壳叠在最上面，等于直接给锁屏界面盖了一床厚棉被，能看见个鬼啊！
🎭 第二回合：反客为主，乾坤大挪移
先把锁屏界面画在下面，再把外壳图盖在上面？不过，那样还是会挡住，这不是掩耳盗铃吗。
“既然上面盖不住，那我就把你垫在下面，把屏幕掏空！”
不，等等，改图太麻烦，还得打开 Photoshop，那不是抢 UI 小哥的活儿吗？侯佩灵机一动，计上心来：倒过来叠！
正确的思路是：让锁屏界面只在“屏幕区域”这一亩三分地里显示，然后把外壳图盖在最上层作为“相框”。这就好比是给照片加相框，照片得在相框底下，但又不能露出来。
ZStack(alignment: .topLeading) {
// 1. 先画锁屏内容（放在下层），这是“里子”
// 注意：这里需要精确控制尺寸和位置，不能让它乱跑
if let screenRect = screenRect(in: layout) {
LockScreenMockView()
.frame(width: screenRect.width, height: screenRect.height)
.position(x: screenRect.midX, y: screenRect.midY)
}
// 2. 再画机壳图（盖在上层），这是“面子”
// 哪怕屏幕区域是黑的，只要我们把上面的锁屏内容“抠”得正好，就能盖住那块黑
Image(uiImage: image)
.resizable()
.frame(width: layout.displaySize.width, height: layout.displaySize.height)
}
刷新预览。
这次，锁屏界面出来了！久违的刘海也看见了！侯佩差点就要起立鼓掌。
但是……定睛一看，四个角穿帮了。
锁屏界面是个方方正正的直角矩形，从 iPhone 那圆润得像鹅卵石一样的机身角落里刺了出来，显得格格不入，就像个穿西装打领带却配了双拖鞋的怪人。
✂️ 第三回合：圆角的救赎
“要优雅，不要污。”侯佩这样对自己说。
必须把锁屏界面的四个角修剪成与机身匹配的圆角，这叫工匠精神。
用 clipShape？试过了，这东西有点“死板”，不太好精确控制位置，容易剪歪。
侯佩沉思片刻，祭出了 SwiftUI 的大招：mask + compositingGroup。这招数好比是“隔山打牛”，指哪打哪。
LockScreenMockView()
// ... 环境配置 ...
.frame(width: screenRect.width, height: screenRect.height)
// 关键一击：合成并遮罩
// compositingGroup 确保遮罩是应用在整个合成后的图层上
.compositingGroup()
.mask(
// 用一个圆角矩形做遮罩，把多余的边角料裁掉
RoundedRectangle(cornerRadius: screenCornerRadius(for: screenRect))
.frame(width: screenRect.width, height: screenRect.height)
)
.position(x: screenRect.midX, y: screenRect.midY)
这下舒服了。
锁屏内容乖乖地缩进了圆角里，严丝合缝，仿佛它天生就长在那里，连强迫症看了都要说一声“好”。
📐 第四回合：像素级的较量
现在只剩最后一个难题：屏幕在哪？多大？
总不能每次换个图，都得拿尺子在屏幕上量像素吧？那也太 Low 了。
侯佩决定写一段算法，让代码自己去“看”。
原理很简单：找黑色。机壳图里的屏幕是黑的，那就扫描像素，找到那块黑色的矩形区域。
private func detectScreenRectNormalized(in image: UIImage) -> CGRect? {
// 遍历像素，找到 alpha > 0 且 RGB 接近黑色的区域
// 就像在煤堆里找煤球，虽然听起来离谱，但在像素世界里是可行的
// ...
// 计算出 minX, minY, maxX, maxY
// 返回归一化的 CGRect，方便按比例缩放
}
当然，为了防止算法偶尔“眼瞎”或者遇到奇葩图片，还得加个双保险——兜底比例：
private var defaultScreenRectNormalized: CGRect {
// 经验之谈：这个比例通常错不了，是侯佩无数次试错换来的血泪教训
CGRect(x: 0.065, y: 0.055, width: 0.87, height: 0.89)
}
🎉 终章：完美的骗局
最后一次刷新。
屏幕亮起，时间显示清晰，刘海静静地躺在顶部，右上角的信号图标甚至为了避让刘海，乖巧地去掉了“5G”字样（这是后话了）。
侯佩靠在椅背上，长舒一口气。
他没去折腾那些复杂的 CLI 工具，仅仅用一张 PNG 图片和几段 SwiftUI 代码，就编织出了一个完美的 iPhone 14 锁屏幻象。
这不仅是代码的胜利，更是 “偷懒”艺术 的巅峰。 在这个由 0 和 1 构成的数字江湖里，有时候，你不需要一把万能钥匙，你只需要一点点巧劲，和一颗为了偷懒而拼命死磕的心。
屏幕熄灭，代码入库。
而在那个预览窗口里，那部 iPhone 14 依然静静地亮着，仿佛在向这深夜里的黑客致意，调皮地眨了眨那不存在的电子眼。
