探索之旅：空间计算中的快速查看

探索之旅：空间计算中的快速查看

了解如何使用 VisionOS 中的快速查看对 3D 内容、空间图像和视频等进行功能强大的预览。我们将向你展示系统呈现这些预览体验的不同方式，演示如何从 App 或网站拖放快速查看内容,创建包含该内容的单独窗口，并探索如何直接在 App 内直接呈现快速查看界面。

资源
- - 高清视频
  - 标清视频
相关视频

WWDC23
- 为快速查看空间体验创建 3D 模型
- 探索 RoomPlan 的增强功能
WWDC20
- 使用 AR Quick Look 进行线上购物
下载

♪ 悦耳的器乐嘻哈 ♪ ♪ 你好欢迎来到“探索之旅：空间计算中的快速查看” 我叫 Youssef 是 AR 快速查看团队的一名工程师今天我将向你介绍 xrOS 中快速查看的所有功能及使用方法在这里你将解锁在该平台使用 App 和网站的全新体验在开始之前让我们先来了解一下什么是快速查看快速查看是一个系统框架有了它你就可以在 iOS、macOS 及现在的 xrOS 中轻松预览和编辑文件快速查看具有强大的编辑功能比如即开即用的视频剪辑以及 PDF 和图像标记它还能够保证文件的安全访问因此你不必担心 App 会打开不受信任的文件快速查看出现在 Apple 平台的许多地方在 iOS 中只要打开任意附件它就会出现在消息线程中在 macOS 中只要在访达或桌面上的任意选中文件上按下空格键即可进入快速查看快速查看是 xrOS 中文件支持内容的系统查看器与 iOS 和 macOS 相同 xrOS 中的 App 可以通过快速查看能轻松获得丰富的文件查看和编辑功能让我们一起来体验一下吧最近我在装修公寓并一直在使用一个 App 跟踪装修进度与装修团队沟通协商我的其中一位室内设计师刚刚给我发了一个文件夹里面有他对房子设计的一些想法我在这里打开了这个文件夹现在我们一起看看他的想法看起来这个客厅设计图用的是 USDZ 文件让我们打开这个文件要想打开这个文件我会先选中文件并将其拖出然后将其放在所有 App 之外
拖出 USDZ 文件后便会在拖出的位置显示一个 3D 快速查看预览图我就可以立即开始与其交互使用选中和拖动手势我就可以旋转这个模型更好地观察这美观的裸露砖墙立面想看看客厅细节的话我可以将模型等比例缩放我的设计师好像还发了一张图片图片上是房子周围的街区最后好像还有一个文档上面列出了他规划的住宅功能其中多数看起来不错但最后这一条我还不太确定我先留个便条吧回头再决定先打开窗口顶部的菜单选择标记打开标记的调色板快速圈出打算回头再看的这一条
我们能够从 App 中拖出文件并在该 App 之外预览该文件我们对多个文件执行了此操作并在源 App 旁查看这些文件这种在快速查看中呈现文件的新方式称为 Windowed Quick Look 在该讲座中你将进一步了解该呈现方式的更多信息以及 App 和网站对它的应用随后我们将介绍直接在 App 中打开快速查看预览的方法首先让我们深入了解一下 Windowed Quick Look Windowed Quick Look 允许你在 App 外打开快速查看预览图如果你想在任何 App 旁查看文件中的内容这就是完美的顺畅体验由于 Windowed Quick Look 预览图托管在单独的 App 中你尽可以关闭源 App 预览图并不会随之关闭 Windowed Quick Look 还提供了更丰富的观看体验适用于 USDZ 和 Reality 文件支持的 3D 模型你可以在 App 之外单独缩放和放置 3D 内容你也能缩放 3D 模型这将使环境变暗并隐藏其他场景助你专注于 3D 内容本身快速查看窗口中显示的某些文件类型还支持同播共享功能因此你可以共享文件并通过 FaceTime 通话查看通过同播共享分享 3D 内容时快速查看会同步 3D 模型的方向、比例和动画效果通过同播共享分享图像时你可与他人共同为该图像添加标记通过快速查看分享同播共享文件时你可以与你的伙伴纵享轻松简单的文件协作体验 App 和网页都可以在快速查看窗口中呈现内容并使用其提供的诸多功能首先我们来看看 Windowed Quick Look 是如何呈现 App 中的内容的通过提供包含某些 URL 的拖动源你就可以在快速查看窗口打开 App 中的文件在拖动交互过程中放置目标于所有 App 之外时系统将在快速查看窗口中复制并显示你提供的 URL 如果该 URL 指向的文件托管在远程目的地例如 iCloud 等系统会先将其下载到本地请注意你提供的文件副本的内容已呈现你对所呈现的文件进行的任何编辑如图像上的标记不会写回到你提供的 URL 中要想了解实际效果让我们一起看看 Xcode
在向 App 添加拖动支持之前让我快速向你介绍一下该 App 通过该 App 你可查看项目进度并查看其他团队成员共享的文件列表现在我们有一个显示 FileView 的列表视图既然我们希望能够拖出每个文件就需要将每个 FileView 变成一个拖动源由此我将 onDrag 修饰符添加到 FileView 上 onDrag 修饰符需要一个 NSItemProvider 我将返回一个 item provider 其中包含在 FileView 中显示文件的 URL
在模拟器中构建并运行 App 现在我可以从文件视图中拖出文件并在新的快速查看窗口中查看该文件即使关闭 App 该文件的预览仍会照常显示通过添加这几行代码我就在 App 中启用了拖放功能并实现在随意使用 App 的同时可以在单独窗口中查看内容的功能现在让我们看看网站要如何实现类似功能自 iOS 12 以来网站已经能够通过 AR 属性标记链接在 iPhone 和 iPad 上的 AR 快速查看中连接并查看 3D 内容当你在 xrOS 上打开带有标记的 3D 内容链接时 Safari 浏览器将在新的快速查看窗口中以 3D 形式呈现内容在 iOS 和 iPadOS 中已支持 AR 内容链接的网站会将此功能延续到 xrOS 上无需额外操作 xrOS 还支持自定义选项例如禁用内容缩放关于自定义选项的更多信息请参见 WWDC19 的 “AR 快速查看深入”讲座如果你尚未对网站进行设置要想通过 Safari 浏览器展示 3D 内容你可以像这样标记你的链接将 rel="ar" 添加到链接或锚元素中 Safari 浏览器不会在轻点时进行导航相反 Safari 浏览器将在网站旁的快速查看窗口中以 3D 形式呈现该文件让我们转到 Safari 浏览器来看看吧现在你看到的是我们的 AR 快速查看图库页面此处用 Safari 浏览器打开此页面链接着许多 3D 模型我们随意打开几个点击此茶壶的链接下载该 3D 模型并在快速查看窗口中呈现该模型下载成功后模型就会立即打开点击此杯子的链接并将其放置在茶壶和 Safari 浏览器旁边对于电子商务网站来说这真的很好用购物时你可能会想在共享空间中查看或在某位置放置商品从而判断其是否适合你我们刚刚介绍了文件的呈现即在快速查看窗口中在 App 之外预览文件在某些用例中你可能希望直接在 App 内预览文件在 App 内显示快速查看内容非常简单在 SwiftUI 中将 URL 传给 QuickLookPreview 函数即可使用 QuickLookPreview 呈现文件时预览将以表格的形式显示在视图的内容之上如果你希望预览时进行更多自定义操作你可以将此处改为 QLPreviewController 如果你要在 xrOS 中继续使用 iOS App quickLookPreview 或 QLPreviewController API 的现有功能将免费继承下面让我们跳到模拟器看看在我们的 Project Tracker App 中能如何利用这一点在这个视图中我可以先审查团队的新设计再将其交给业主审核现在我可以看到文件列表但实际上无法预览任何文件让我们转到 Xcode 看看是否可以解决这个问题这是我现在的视图要想直接在 App 中预览文件我会先导入 QuickLook 然后添加 SwiftUI quickLookPreview 函数传递我想要预览的所有文件以及我最初想要选择的特定文件
让我们运行一下看看效果如何
回到 App 现在当我选择此视图时可以看到一张带有预览入口的表格直接出现在 App 中我可以使用工具栏中的导航控件循环浏览文件并在发送给房主之前确认文件一切正常直接在 App 中呈现文件预览易如反掌传递 URL 到 quickLookPreview 函数也十分简单现在我们已经介绍了该平台上两种类型的快速查看下面看看支持预览的文件类型快速查看可以支持各常见的文件类型包括图像、视频、 PDF 和 USDZ 文件快速查看中显示的立体图像和视频效果与照片一样精美以上就是对 xrOS 中快速查看功能的简单介绍现在我们回顾一下今天的所有内容我们讨论了快速查看能为 App 提供的丰富的预览和编辑功能随后讨论了 Windowed Quick Look 一种 App 使用快速查看预览内容的新方法以及 Windowed Quick Look 提供的各个功能如多重预览支持有了这个功能你就可以在 App 外查看相关内容享受立体沉浸式 3D 内容观看和同播共享支持接着我们讨论了 App 如何简化自身工作流程并通过添加拖放功能来利用快速查看窗口以及网站如何在 Safari 浏览器中利用快速查看窗口呈现 3D 内容我们还看到在 SwiftUI 中 App 内快速查看内容是多么简单如果你安装的 App 已经使用过快速查看你几乎无需任何操作就能在此平台上获得出色的快速查看体验同样已经链接到 AR 内容的网站也将免费保留该功能快速查看为 App 提供简约、强大和安全的文件查看体验我们迫不及待地想看看你会在 xrOS 中使用快速查看进行哪些操作 ♪

5:15 - drag support for quick look from apps

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()
            }
        }
    }
}

8:45 - swiftUI quick look preview function

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 })
  	}
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC23

WWDC20