Vision Pro 新手教学：SwiftUI 实现 3D 应用的技巧，基础篇

这里每天分享一个 iOS 的新知识，快来关注我吧

前言

苹果的 Vision Pro 已经推出一段时间了，App Store 上也上架了很多 Vision OS 的应用。如果你也有开发相关应用的想法，现在正是学习 SwiftUI API 的好时机，这些 API 可以让我们将应用适配到 visionOS 提供的沉浸式世界中。

苹果宣称，使用 Swift 和 SwiftUI 构建应用是最佳选择。这篇文章，我们将简单学习如何使用 SwiftUI 构建 visionOS 应用。

窗口管理

SwiftUI 的一大优点是其自动适应平台的能力。无需任何额外操作，你用 SwiftUI 编写的应用即可在 visionOS 上运行，但通过结合平台特性可以进一步提升用户体验。

比如，在 visionOS 中，我们使用新的工具栏定位 bottomOrnament，这在窗口外部展示与窗口连接的控件。通过 ornament 视图修饰符，你可以手动创建这些装饰物。

css 复制代码

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            List {
                // list content
            }
            .navigationTitle("Models")
            .toolbar {
                ToolbarItem(placement: .bottomOrnament) {
                    Button("open", systemImage: "doc.badge.plus") {
                        
                    }
                }
                
                ToolbarItem(placement: .bottomOrnament) {
                    Button("open", systemImage: "link.badge.plus") {
                        
                    }
                }
            }
        } detail: {
            Text("Choose something from the sidebar")
        }
    }
}

此外，可以使用视图修饰符 transform3DEffect 和 rotation3DEffect 来添加深度效果以适应 visionOS 的沉浸式体验。

Volumes 内容

在 visionOS 上，应用可以在同一个场景中呈现 2D 和 3D 内容。我们可以使用 RealityKit 框架展示 3D 内容。例如，RealityKit 提供了 Model3D SwiftUI 视图，允许我们展示 USDZ 或 Reality 文件中的 3D 模型。

css 复制代码

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            List(Model.all) { model in
                NavigationLink {
                    Model3D(named: model.name)
                } label: {
                    Text(verbatim: model.name)
                }
            }
            .navigationTitle("Models")
        } detail: {
            Model3D(named: "robot")
        }
    }
}

通过 windowStyle 修饰符，你可以启用内容的 volumetric 显示，使内容在三维中扩展以匹配模型的大小。

css 复制代码

struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .windowStyle(.volumetric)
    }
}

对于更复杂的 3D 场景，我们可以使用 RealityView 并在其中填充 3D 内容。

css 复制代码

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            List(Model.all) { model in
                NavigationLink {
                    RealityView { content in
                        // load the content and add to the scene
                    }
                } label: {
                    Text(verbatim: model.name)
                }
            }
            .navigationTitle("Models")
        } detail: {
            Text("Choose something from the sidebar")
        }
    }
}

沉浸式空间

在 visionOS 中的第三种选择是完全沉浸式体验，允许我们通过聚焦于场景来隐藏周围的一切。

scss 复制代码

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        
        ImmersiveSpace(id: "solar-system") {
            SolarSystemView()
        }
    }
}

可以使用 ImmersiveSpace 类型定义场景，并通过 openImmersiveSpace 环境值启用它。

swift 复制代码

struct MyMenuView: View {
    @Environment(\.openImmersiveSpace) private var openImmersiveSpace
    
    var body: some View {
        Button("Enjoy immersive space") {
            Task {
                await openImmersiveSpace(id: "solar-system")
            }
        }
    }
}

同时，可以使用 dismissImmersiveSpace 环境值来关闭沉浸式空间。注意一次仅能显示一个沉浸式空间。

swift 复制代码

struct SolarSystemView: View {
    @Environment(\.dismissImmersiveSpace) private var dismiss
    
    var body: some View {
        // Immersive experience
        
        Button("Dismiss") {
            Task {
                await dismiss()
            }
        }
    }
}

结论

今天，我们了解了适用于 visionOS 平台的 SwiftUI 框架的基础知识。希望你喜欢这篇文章。如果你有任何问题，可以在评论区留言。以后我们会分享更多关于 SwiftUI 和 visionOS 的内容。

这里每天分享一个 iOS 的新知识，快来关注我吧

本文同步自微信公众号 "iOS新知"，每天准时分享一个新知识，这里只是同步，想要及时学到就来关注我吧！