前言

Apple Vision Pro 即將推出，現在是看看 SwiftUI API 的完美時機，這使我們能夠將我們的應用程序適應 visionOS 提供的沉浸式世界。蘋果表示，構建應用程序的最佳方式是使用 Swift 和 SwiftUI。下面，我們將學習如何使用 SwiftUI 構建 visionOS 應用程序。

Windows

我喜歡 SwiftUI 的一點是它如何自動適應平臺。你無需執行任何操作即可在 visionOS 上運行使用 SwiftUI 編寫的應用程序。它可以即插即用。但是，你始終可以通過向前移動并適應平臺功能來改進用戶體驗。

struct ContentView: View {var body: some View {NavigationSplitView {List {// 列表內容}.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")}}
}

在上面的示例中，我們使用了稱為 bottomOrnament 的新工具欄放置。 visionOS 中的裝飾是位于窗口外部的位置，用于呈現與窗口連接的控件。你還可以通過使用新的 ornament 視圖修改器手動創建它們。

struct ContentView: View {var body: some View {NavigationSplitView {List {// 列表內容}.navigationTitle("Models").ornament(attachmentAnchor: .scene(.leading)) {// 在此處放置你的視圖}} detail: {Text("Choose something from the sidebar")}}
}

新的 ornament 視圖修改器允許我們為其連接的窗口創建一個具有特定錨點的裝飾。將你的應用內容適應 visionOS 提供的沉浸式體驗的另一種方法是使用 transform3DEffect 和 rotation3DEffect 視圖修改器來加入深度效果。如下圖：

Volumes

你的應用程序可以在 visionOS 上的同一場景中并排顯示 2D 和 3D 內容。在這種情況下，我們可以使用 RealityKit 框架來呈現 3D 內容。例如，RealityKit 為我們提供了 Model3D SwiftUI 視圖，允許我們從 USDZ 或實際文件中顯示 3D 模型。

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

Model3D 視圖的工作方式類似于 AsyncImage 視圖，并異步加載模型。你還可以使用 Model3D 初始化器的另一種變體，它允許你自定義模型配置并添加占位視圖。

struct ContentView: View {var body: some View {NavigationSplitView {List(Model.all) { model inNavigationLink {Model3D(url: Bundle.main.url(forResource: model.name,withExtension: "usdz")!) { resolved inresolved.resizable().aspectRatio(contentMode: .fit)} placeholder: {ProgressView()}} label: {Text(verbatim: model.name)}}.navigationTitle("Models")} detail: {Model3D(named: "robot")}}
}

在你的應用程序中呈現 3D 內容時，你可以使用 windowStyle 修飾符來啟用內容的體積顯示。體積樣式允許你的內容在第三維中增長，以匹配模型的大小。

對于更復雜的 3D 場景，我們可以使用 RealityView 并填充它以 3D 內容。

struct ContentView: View {var body: some View {NavigationSplitView {List(Model.all) { model inNavigationLink {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 的第三個選項是完全沉浸式體驗，允許我們通過隱藏周圍的所有內容來專注于你的場景。

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

正如你在上面的示例中所看到的，我們通過使用 ImmersiveSpace 類型來定義場景。它允許我們通過使用 openImmersiveSpace 環境值來啟用它。

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

我們還可以使用 dismissImmersiveSpace 環境值來關閉沉浸式空間。請記住，你一次只能顯示一個沉浸式空間。

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

結論

在介紹了 SwiftUI 在 visionOS 上的應用之后，我們了解到 SwiftUI 可以幫助我們輕松構建適應 visionOS 的應用程序。不僅如此，SwiftUI 還提供了許多方便的工具和修飾符，例如 windowStyle 修飾符，可用于在應用程序中呈現 3D 內容，并使內容根據模型的大小自動適應。通過引入沉浸式空間，我們可以將用戶帶入全新的體驗，讓他們沉浸在應用程序的世界中。總的來說，SwiftUI 為構建 visionOS 應用程序提供了強大而靈活的工具，我們可以期待在這個全新的平臺上開發出令人驚嘆的應用體驗。