SwiftUI中如何将图片准确嵌入设备框架屏幕？

我需要把截图嵌入到设备PNG图片的屏幕区域，用ZStack实现后，即便设置了尺寸参数，效果还是不理想，截图和设备屏幕的对齐、匹配都有问题。

现有代码 #

Image(viewModel.device.name)
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(height: viewModel.canvasWidth / 1.40)
    .background(
        viewModel.screenShot?
            .resizable()
            .aspectRatio(contentMode: viewModel.contentMode)
            .frame(height: viewModel.canvasWidth / 1.45)
            .cornerRadius((viewModel.canvasWidth / 1.25) / 15)
    ).clipped()

效果截图 #

解决方案 #

问题核心是用background承载截图的思路不对——background会填充整个设备图的背景区域，没法精准匹配设备屏幕的位置和尺寸。正确做法是用ZStack分层，把截图放在下层，设备PNG放在上层，再精准调整截图的大小和位置：

ZStack(alignment: .center) {
    // 下层：截图，精准匹配设备屏幕区域
    viewModel.screenShot?
        .resizable()
        .aspectRatio(contentMode: viewModel.contentMode)
        // 根据你的设备图实际屏幕比例调整宽高，示例值需自行微调
        .frame(width: viewModel.canvasWidth / 1.8, height: viewModel.canvasWidth / 1.2)
        .cornerRadius(12) // 对应设备屏幕的圆角大小
    
    // 上层：设备PNG，需确保是透明背景
    Image(viewModel.device.name)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(height: viewModel.canvasWidth / 1.40)
}

关键注意点 #

• 设备PNG必须是透明背景，否则下层的截图无法透过屏幕区域显示
• 需要根据你使用的设备图实际尺寸、屏幕位置，微调截图的frame宽高和offset（如果屏幕不在设备图正中心，可添加.offset(x: 0, y: 3)这类偏移参数）
• 若设备屏幕有特殊圆角，调整截图的cornerRadius值即可匹配

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