文章引用来源：WWDC23 session Elevate your windowed app for spatial computing

概述

SwiftUI 可以将多平台应用程序引入 visionOS 和 Shared Space(共享空间)。SwiftUI 代码可以自动适应以支持 visionOS 平台的独特上下文和呈现。通过不局限于更新自定义视图、改进应用的 UI 以及添加特定于此平台的功能和控件等方法，可以使窗口应用程序在这个新的空间平台上真正引人注目。借助 Spatial Computing(空间计算)，可以使应用程序在物理空间中存在，从而实现全新类别的令人惊叹的三维体验。

关键词

SwiftUI、Shared Space、Dynamic Content scaling、Vector Assets、Vibrancy Material、Hover effects、Ornaments、TabView、Toolbar。

SwiftUI

前言

visionOS 从开始构建时就考虑到了 SwiftUI。事实上，在 Vision Pro 中的大多数系统应用程序都是用 SwiftUI 编写的，例如 Keynote、Freeform 和 TV，它们都将其熟悉的界面带入了你的的物理环境中。尽管这些应用程序看起来与 iPad 应用程序相似，但它们充分利用了该平台上的新设计语言和交互方法。

本文将以一款支持 iPhone、iPad、Mac、和 Apple Watch 平台的 Backyard Birds 应用为例，讲述如何将应用引入到 Vision Pro 中以及如何润色、增强你的应用的交互体验。

图 1 – Vision Pro 中的 Keynote

图 2 – Vision Pro 中的 Freefrom

图 3 – Vision Pro 中的 Apple TV

SwiftUI in the Shared Space(身处共享空间中的 SwiftUI)

将 App 构建到 Vision Pro 的 Shared Space(共享空间)

1、 Xcode 中选择主 Target，General->Supported Destination，点击+号，选择 xrOS Device，选择 Enable。

图 4 – Xcode 中启用 xrOS Device（1）

图 5 – Xcode 中启用 xrOS Device（2）
2、主 Target scheme 选择 xrOS Device，充构建应用程序即可。在模拟器中，当我四处移动光标时，应用程序会像在 Vision Pro 上的眼睛的移动的交互反馈一样给予你响应。例如，当光标移动到某一个可选项时，光标会呈现 Hover effects(悬浮效果)。

图 6 – Xcode 选择 xrOS Device 作为应用构建目标

图 7 – Backyard Birds 构建成功后 Vision Pro 模拟器效果 & 光标移动到可选中时的 Hover effects 效果

应用特性

Glass backgournds(玻璃背景)

1、默认由应用程序的窗口提供。
2、会根据照明条件和背后物体的颜色调整对比度和色彩平衡。
3、没有 light 和 dark 外观的 style 区分。无论应用处在物理空间中的何处，玻璃效果都会自动确保应用保持清晰可读状态。

Polishing your app(润色你的应用)

Dynamic content scaling(动态内容缩放)

与其他 Apple 平台不同，处于 Shared Space 物理环境中的应用，其没有带有物理像素的屏幕来定义内容可以绘制的质量。另外由于应用程序可以放置在任何地方，它们可能会被推得离你很远，或被拉近，甚至从某个角度观看，在此过程中，系统通过动态缩放内容来确保应用程序在所有场景下都看起来清晰可见。对此，对于内容就用了动态缩放的要求。

Prefer vectors over bitmaps：传统的位图，在缩放的时候会降低质量，为了保持质量，要让系统做到这一点，我们必须提供矢量资产。
Text and SF Symbols are vectors：文本和 SF 符号默认是矢量的，可缩放。
在 Xcode 中设置矢量资产
1. 将图片的 individual scale 切换为 single scale。
  
  图 8 – 将图片资源的 individual scale 改设置为 single scale
2. 将图片已设置的 2x、3x 等所有资源移除后，选择图片对应的矢量图，并勾选 Preserve Vector Data，以允许图片进行任意尺寸的缩放，该配置所有平台都支持。
  
  图 9 – 选择矢量图资源并勾选Preserve Vector Data
  
  视频 1 – 矢量图片的配置及缩放预览效果

适配 Vibrancy 以让内容以最佳形式展现：

Vibrancy 材质引入了额外的对比度和亮度，以确保 Glass 效果顶部的内容无论透过什么都清晰可见。默认情况下，所有内置控件和容器都使用 Vibrancy 材质，如果我们使用的是标准控件，则无需额外的工作。

图 10 – 系统空间 Vibrancy 材质效果

标准的语义风格：

SwiftUI 的语义样式在每个平台上自动采用适当的外观。在 Vision Pro 上由于 Glass 背景会随着环境光变化，使用这些语义样式可以使我们的内容更清晰易读。

图 11 – SwitUI 中 Text 控件在 Vision Pro上的 4 种风格

Remove Solid Color(去除固定颜色配置)

下图中的植物选项卡显示所有植物的网格，因为在代码中写的是固定的纯色，导致植物后面的这些圆圈看起来很亮而且不合适，在物理空间中，植物网格应该适应物理空间的背景，有投过去的效果。


...
// 植物网格背景
var backgroudColor: Color {
    if colorScheme == .dark {
        Color(white: 0.6)
    } else {
        Color(white: 0.8)
    }
}
// 植物网格背景设置
var body: some View {
    PlantIcon(plant)
        .background(backgroudColor, in: .circle)
}
...
...
// 植物网格背景
var backgroudColor: Color {
    if colorScheme == .dark {
        Color(white: 0.6)
    } else {
        Color(white: 0.8)
    }
}
// 植物网格背景设置
var body: some View {
    PlantIcon(plant)
        .background(backgroudColor, in: .circle)
}
...
...
// 植物网格背景
var backgroudColor: Color {
    if colorScheme == .dark {
        Color(white: 0.6)
    } else {
        Color(white: 0.8)
    }
}
// 植物网格背景设置
var body: some View {
    PlantIcon(plant)
        .background(backgroudColor, in: .circle)
}
...

图 8 – 植物网格纯色背景效果

使用使用语义填充颜色替换纯色：替换后，可从 13~15 中发现，网格背景在每个不同光照的房间中，在 Glass 背景下，都有着很好的效果。


   ...
   // 植物网格背景设置
   var body: some View {
       PlantIcon(plant)
           .background(.fill.tertiary, in: .circle)
   }
   ...
   ...
   // 植物网格背景设置
   var body: some View {
       PlantIcon(plant)
           .background(.fill.tertiary, in: .circle)
   }
   ...
   ...
   // 植物网格背景设置
   var body: some View {
       PlantIcon(plant)
           .background(.fill.tertiary, in: .circle)
   }
   ...

图 9 – 植物网格语义填充色背景图(1)

图 10 – 植物网格语义填充色背景图(2)

图 11 – 植物网格语义填充色背景图(3)

提升可交互组件的操作性

Vision Pro 中与 App 交互的 4 种方法：眼、手、光标、无障碍访问。
- 最常见的交互是间接捏合手势配合注视控件并将手指合拢以执行点击。如果某个应用程序离你很近，你只需伸出手触摸它就可以直接与其进行交互。如果你配置了触控板，则可以将其用作精确输入的指针。无障碍技术的 VoiceOver 和 Switch Control 等工具使都每个人能在使用应用程序时获得同样出色的体验。
  
  图 12 – Vision Pro 中与 App 交互的方法

Hover effects：
- Vision Pro 中，当用户用眼睛注释到某个可交互的系统控件时，控件会高亮以显示你可以与其交互，这种悬浮效果称为 Hover effects。它有以下的有点：
- 1、使应用感觉响应迅速。
- 2、给予你更多与 App 进行互动的信息。
- 3、系统的标准控件自带 Hover effects 效果。
- 使用 SwiftUI 自带的 hoverEffect 为植物网格背景添加 hover effects 效果。

图 13 – 设置内容圆角和背景 hover effects 效果

Hover effects privacy

1、悬浮效果旨在保护隐私。
2、这些效果由应用进程之外的系统执行。系统悬停效果是使你的应用程序对用户所注视的位置做出反应的唯一方法。
3、应用程序仅接收交互通知：只有当有用户捏手指、直接触摸你的应用程序或将手指或指针悬停在你的控件上时，你的应用程序才会被告知该展示悬浮效果了。

Brand new concepts(全新的功能)

Ornaments 之 TabView

不同于传统的 iPad 应用中的 tabBar、toolBar，TabView 独立于 App 主窗口单独显示。

图 14 – 系统 Photo 应用左侧 TabView 收起效果图。

图 15 – 系统 Photo 应用左侧 TabView 展开效果图
将应用的 NavigationSplitView 改造为 TabView，如下图：

图 16 – Backyard Birds 原有使用 NavigationSplitView

图 17 – Backyard Birds 将 NavigationSplitView 改造为 TabView

图 18 – Backyard Birds 改造后 TabView 显示效果-展开

图 19 – Backyard Birds 改造后 TabView 显示效果-收起

Ornaments 之 Toolbar

Toolbar 同 TabView 同属于 Ornaments。它独立显示于应用底部，和TabView 一样自动提供玻璃化的胶囊背景，有着对应的 Hover effects、点击响应等效果。

图 20 – Ornaments 之 Toolbar 效果

自定义Ornaments

通过ornaments()函数调用，可以实现自定的 Ornaments。
attachmentAnchor：确定 Ornaments 将附加在你的的应用程序中的哪个位置。这里是底部。
contentAligment：允许你选择装饰物的哪一部分与 attachmentAnchor 对齐。这里是居中对齐。
glassBackgroundEffect()：针对自定义的控件，需要自己调用方法以启用 Glass 背景效果。(系统控件自带)

图 21 – 自定义 ornament