Meet SwiftUI for spatial computing
Swift & UI 进阶 20m

SwiftUI 遇见空间计算：窗口、体积与全空间

Meet SwiftUI for spatial computing

2023年6月5日

在 Apple 官方观看视频

一句话判断

SwiftUI 是空间计算平台的首选 UI 框架，系统本身从控制中心到 Safari 都用它构建。三种场景类型（窗口、体积、全空间）构成了 App 的完整形态。

这场 Session 讲了什么

Andrew 从 SwiftUI 团队出发，讲解了 SwiftUI 在空间计算平台上的全新能力：

平台设计哲学。SwiftUI 的”一次学习，处处适用”理念在新平台上体现得最为明显。Button 默认使用 bordered 样式和 vibrant 材质背景，支持注视触发的悬停效果和工具提示；TabView 悬挂在窗口侧边，注视时展开显示标签文字。这些智能默认值让你的 App 天然融入平台。

三种场景类型。Window 是传统的 2D 窗口，使用玻璃背景让周围环境透过来。Volume 是新的 3D 窗口样式，在有限空间中展示 3D 对象，可以和其他 App 并列显示。Full Space 给 App 完全控制权，隐藏其他 App 的窗口，可以在真实世界中叠加 3D 内容或完全沉浸。

窗口的构成。玻璃背景是基础。TabView 放在窗口左侧边缘做导航，NavigationStack 和 SplitView 组织层级，List 用新的样式呈现信息，内置控件（Button、Toggle、Picker）自动获得平台适配的外观和交互。

Ornament。新概念——附着在窗口上的辅助视图，可以超出窗口边界。适合放置不影响主内容的额外控件。

值得深挖的点

场景类型的组合使用。三种场景不是互斥的。你可以从窗口弹出体积来预览 3D 模型，再从体积进入全空间实现完全沉浸。多个同类场景也可以并存，让用户独立打开和关闭。

材质系统的特殊性。空间计算平台没有明暗模式的区分——材质会根据光线条件和背后物体的颜色自动调节对比度和色温。这意味着你不需要考虑深色/浅色适配，但需要理解 vibrant 材质的行为。

TabView 的注视交互。TabView 平时只显示图标，用户注视时自动展开显示文字标签。这是”眼睛驱动 UI”的典型案例——系统利用注视信息来优化信息密度。

代码片段

// 定义包含三种场景的 App
@main
struct SolarSystemApp: App {
    var body: some Scene {
        // 传统 2D 窗口
        WindowGroup {
            SolarSystemHome()
        }
        
        // 3D 体积窗口
        WindowGroup(id: "planet-viewer") {
            PlanetViewer()
        }
        .windowStyle(.volumetric)
        .defaultSize(width: 0.6, height: 0.6, depth: 0.6, in: .meters)
        
        // 沉浸空间
        ImmersiveSpace(id: "solar-system") {
            SolarSystemImmersive()
        }
    }
}
// 使用 Ornament 添加窗口外控件
.ornament(
    attachmentAnchor: .scene(.bottom)
) {
    // 窗口底部的控制按钮
    HStack {
        Button("缩放") { /* ... */ }
        Button("旋转") { /* ... */ }
    }
    .glassBackgroundEffect()  // 添加玻璃背景
}

最佳实践

  • 新代码用 SwiftUI 写，现有代码中能用的部分继续用。
  • 窗口适合内容展示和信息输入，体积适合 3D 对象预览，全空间适合沉浸式体验。
  • 使用语义颜色和系统组件，获得自动的平台适配。
  • Ornament 适合放不影响主内容但需要随时访问的控件。
  • 测试时关注注视交互——TabView 的展开收起、Button 的工具提示。

还有什么值得关注

  • “Take SwiftUI to the next dimension” 讲了更多 3D 内容展示
  • “Go beyond the window with SwiftUI” 深入讲解沉浸空间
  • “Elevate your windowed app for spatial computing” 讲窗口 App 的优化
  • 系统自带的 TV、Safari、Freeform、Keynote 都是 SwiftUI 实现的，可以作为设计参考
WWDC 2023