Xcode Tip-Preview导出界面截图

介绍

从 Xcode 15.3 开始，Preview（Canvas）新增了复制截图与导出截图功能，使开发者无需运行模拟器即可获取界面的高质量截图，非常适合写文档、制作教程、设计评审等场景。

位置

在预览界面开启的情况下，可使用以下两个入口：

• 通过 Editor —> Canvas —> Copy Preview Screenshot 可以拷贝预览界面。
• 通过 Editor —> Canvas —> Export Preview Screenshot 可以导出预览界面。

使用步骤

1. 使用 Xcode 15.3 或更高版本。
2. 打开包含 #Preview {} 的视图文件。
3. 确保右侧 Canvas 处于显示状态。
4. 选择要截图的 Preview，使用菜单导出或拷贝截图。

示例

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello SwiftUI")
            .padding()
    }
}

#Preview("iPhone 17 Pro - Light") {
    ContentView()
}

#Preview("iPhone 17 Pro - Dark") {
    ContentView()
        .preferredColorScheme(.dark)
}

然后：

• 在 Xcode 中打开 ContentView.swift。
• 确保右侧 Canvas 显示预览，选择想截图的预览 (比如 Light Mode, iPhone 17 Pro)。
• 菜单栏点击 Editor → Canvas → Export Preview Screenshot，选择保存路径，例如 ~/Desktop/screenshots/ContentView-light.png。
• 再切换到 Dark Mode 预览，同样导出 ContentView-dark.png。

如此便可以得到两组干净、高分辨率、无设备框架 (device frame) 的界面图。