WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Discover Quick Look for spatial computing

Discover Quick Look for spatial computing

Quick LookvisionOSSpatial ComputingUSDZ
观看原视频

Highlight

visionOS 上的 Quick Look 支持 Windowed 模式，用户可以从 App 或网站拖拽文件到空间中生成独立预览窗口，3D 模型支持自由缩放和沉浸式查看，且现有 iOS Quick Look 代码无需修改即可自动适配。

核心内容

Quick Look 是什么

Quick Look 是 Apple 平台的系统框架，让用户无需打开专门应用就能预览和编辑文件。在 iOS 上，它出现在消息附件中；在 macOS 上，按空格键就能预览 Finder 中的文件。

在 visionOS 上，Quick Look 是文件内容的系统级查看器。它自带视频剪辑、PDF 和图片 Markup 等编辑功能，并负责安全地处理不受信任的文件。

Windowed Quick Look：全新的呈现方式

Windowed Quick Look 是 visionOS 上的新特性。用户可以从 App 中拖拽文件到空间中的任意位置，生成一个独立的 Quick Look 预览窗口。

这个窗口有几个特点：

  • 与源 App 并存，关闭 App 后预览窗口仍然保留
  • 3D 模型（USDZ 和 Reality 文件）支持自由缩放和放置
  • 缩放 3D 模型时，环境会变暗，其他场景隐藏，让用户专注查看内容
  • 支持多文件预览，多个 Quick Look 窗口可以同时存在
  • 部分文件类型支持 SharePlay，可以在 FaceTime 中共享并同步查看

SharePlay 的具体表现：共享 3D 内容时，Quick Look 会同步模型的方向、缩放和动画；共享图片时，多人可以一起 Markup。

App 如何支持 Windowed Quick Look

App 只需要为可拖拽的元素添加 onDrag 修饰符，返回包含文件 URL 的 NSItemProvider。当用户将文件拖出 App 放到空白空间时，系统会自动创建 Quick Look 窗口。

如果 URL 指向远程文件（如 iCloud），系统会自动下载。需要注意的是，预览的是文件的副本，Markup 等编辑不会写回原始 URL。

网站如何支持 Windowed Quick Look

网站从 iOS 12 开始就支持 AR Quick Look，在链接上添加 rel="ar" 属性即可。这个支持在 visionOS 上自动生效，Safari 会在 Quick Look 窗口中打开 3D 内容。

已有的 iOS AR Quick Look 网站无需任何修改就能在 visionOS 上工作，包括禁用内容缩放等自定义选项。

App 内 Quick Look

除了 Windowed 模式，App 也可以在内部呈现 Quick Look 预览。SwiftUI 提供 .quickLookPreview() 修饰符，传入 URL 数组和当前选中的 URL 即可。预览以 sheet 形式覆盖在视图内容上方。

如果需要更多自定义选项，可以使用 QLPreviewController。现有 iOS App 中的 Quick Look 代码迁移到 visionOS 时，几乎不需要改动。

支持的文件类型

Quick Look 在 visionOS 上支持常见的文件类型：

  • 3D 模型：USDZ、Reality 文件
  • 图片（支持空间图片）
  • 视频（支持空间视频）
  • PDF（支持 Markup）

空间图片和视频在 Quick Look 中的显示效果与照片 App 中一致。

详细内容

为 App 添加拖拽支持

（05:15）

import Foundation
import SwiftUI
import UniformTypeIdentifiers

struct FileList: View {
    
    @State var files: [File]
    @State var previewedURL: URL? = nil
    @State var selectedFile: File? {
        didSet {
            self.previewedURL = selectedFile?.url
        }
    }
    
    var body: some View {
        List(files, selection: $selectedFile) { file in
            Button(file.name) {
                selectedFile = file
            }
            .onDrag {
                return NSItemProvider(contentsOf: file.url) ?? NSItemProvider()
            }
        }
    }
}

关键点：

  • onDrag 修饰符将列表项变成拖拽源
  • NSItemProvider(contentsOf:) 用文件 URL 创建 item provider
  • 用户将文件拖出 App 放到空白空间时，系统自动创建 Quick Look 窗口
  • 远程 URL（如 iCloud）会自动下载
  • 编辑操作（如 Markup）作用于副本，不影响原始文件

App 内 Quick Look 预览

（08:45）

import Foundation
import SwiftUI

struct FileList: View {
    
    @State var files: [File]
    @State var previewedURL: URL? = nil
    @State var selectedFile: File? {
        didSet {
            self.previewedURL = selectedFile?.url
        }
    }
    
    var body: some View {
        List(files, selection: $selectedFile) { file in
            Button(file.name) {
                selectedFile = file
            }
        }
        .quickLookPreview($previewedURL, in: files.map { $0.url })
    }
}

关键点：

  • .quickLookPreview($previewedURL, in:) 在视图上添加 Quick Look 预览
  • 第一个参数是绑定的 URL，控制当前预览的文件
  • 第二个参数是所有可预览文件的 URL 数组，用于工具栏导航
  • 预览以 sheet 形式呈现，用户可以在文件间切换
  • 现有 iOS App 使用 QLPreviewController 或 .quickLookPreview 的代码自动适配 visionOS

网站的 AR Quick Look 支持

（06:59）

网站只需要在链接上添加 rel="ar" 属性：

<a href="path/to/model.usdz" rel="ar">
    <img src="thumbnail.jpg" alt="3D Model">
</a>

关键点：

  • rel="ar" 阻止 Safari 导航到新页面
  • 点击后在 Quick Look 窗口中打开 3D 模型
  • iOS/iPadOS 上已有的 AR Quick Look 支持自动迁移到 visionOS
  • 支持自定义选项如禁用内容缩放（参见 WWDC19 “Advances in AR Quick Look”）
  • 电商网站可以用这种方式让用户在空间中查看和摆放产品

核心启发

  • 做什么：为文件管理类 App 添加拖拽预览功能，让用户可以将文件拖出到空间中查看。

  • 为什么值得做：Windowed Quick Look 让用户可以同时查看文件和使用 App，3D 模型支持沉浸式查看。实现成本极低，只需添加 onDrag 修饰符。

  • 怎么开始：为文件列表中的每个条目添加 .onDrag { NSItemProvider(contentsOf: file.url) }，确保文件有有效的 URL。

  • 做什么：在电商网站中为 3D 产品模型添加 AR Quick Look 支持。

  • 为什么值得做：visionOS 用户可以直接在空间中查看和摆放产品，获得比图片更直观的购物体验。iOS 上已有的 rel="ar" 支持自动生效。

  • 怎么开始：为产品页面的 3D 模型链接添加 rel="ar" 属性，准备 USDZ 格式的模型文件。

  • 做什么：在协作类 App 中用 Quick Look 展示设计稿和文档，支持团队审阅。

  • 为什么值得做：PDF 和图片支持 Markup，SharePlay 支持多人同步查看和标注。Windowed 模式让团队成员可以各自调整查看角度。

  • 怎么开始：使用 .quickLookPreview($previewedURL, in: fileURLs) 在 App 内展示，或添加拖拽支持让用户将文件拖出到共享空间中。

  • 做什么：为空间图片和视频提供 Quick Look 预览入口。

  • 为什么值得做：空间图片和视频在 Quick Look 中的显示效果与照片 App 一致，用户可以直接在空间中体验立体内容。

  • 怎么开始：空间图片和视频的 URL 直接传入 .quickLookPreview() 或 NSItemProvider(contentsOf:)，无需额外处理。

关联 Session

评论

GitHub Issues · utterances