Live Preview Window - Show/Hide?

apple xcode IDE swiftui live preview window canvas

字数统计: 254阅读时长: 1 min

 2025/02/10 

背景

最近不小心隐藏了预览窗口，找了很久才重新显示出来，特此记录。
Live Preview Window（预览窗口）是 Xcode 的实时预览窗口功能，用于在编码时实时查看 SwiftUI 界面效果。

显示/隐藏预览窗口

有两种方式可以显示/隐藏预览窗口：

快捷键操作：

1 2	Command + Option + Return # 显示/隐藏预览窗口 Command + Return # 刷新预览

通过菜单栏：

Editor
  └─ Canvas
      ├─ Show Canvas        # 显示预览
      ├─ Assistant          # 辅助编辑器
      ├─ Preview            # 预览
      └─ Selectable         # 可选择模式

预览窗口模式

预览窗口有两种模式：

内嵌预览（Canvas）：
1
2
3
#Preview {
ContentView()
}

独立预览窗口：

1 2	1. 点击预览窗口右上角的 "Detach Preview" 按钮 2. 预览会在单独窗口中打开

使用示例

自定义预览示例：

#Preview {
    ContentView()
        .preferredColorScheme(.dark)    // 深色模式
        .previewDevice("iPhone 16 Pro") // 指定设备
}

// 多设备预览
#Preview {
    Group {
        ContentView()
            .previewDevice("iPhone 16")

        ContentView()
            .previewDevice("iPhone 16 Pro Max")
    }
}