如何使用 SwiftUI 構(gòu)建 visionOS 應(yīng)用
前言
Apple Vision Pro 即將推出，現(xiàn)在是看看 SwiftUI API 的完美時(shí)機(jī)，這使我們能夠?qū)⑽覀兊膽?yīng)用程序適應(yīng) visionOS 提供的沉浸式世界。蘋果表示，構(gòu)建應(yīng)用程序的最佳方式是使用 Swift 和 SwiftUI。下面，我們將學(xué)習(xí)如何使用 SwiftUI 構(gòu)建 visionOS 應(yīng)用程序。
Windows
我喜歡 SwiftUI 的一點(diǎn)是它如何自動適應(yīng)平臺。你無需執(zhí)行任何操作即可在 visionOS 上運(yùn)行使用 SwiftUI 編寫的應(yīng)用程序。它可以即插即用。但是，你始終可以通過向前移動并適應(yīng)平臺功能來改進(jìn)用戶體驗(yàn)。
struct ContentView: View {
var body: some View {
NavigationSplitView {
List {
// 列表內(nèi)容
}
.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 中的裝飾是位于窗口外部的位置，用于呈現(xiàn)與窗口連接的控件。你還可以通過使用新的 ornament 視圖修改器手動創(chuàng)建它們。
struct ContentView: View {
var body: some View {
NavigationSplitView {
List {
// 列表內(nèi)容
}
.navigationTitle("Models")
.ornament(attachmentAnchor: .scene(.leading)) {
// 在此處放置你的視圖
}
} detail: {
Text("Choose something from the sidebar")
}
}
}新的 ornament 視圖修改器允許我們?yōu)槠溥B接的窗口創(chuàng)建一個(gè)具有特定錨點(diǎn)的裝飾。將你的應(yīng)用內(nèi)容適應(yīng) visionOS 提供的沉浸式體驗(yàn)的另一種方法是使用 transform3DEffect 和 rotation3DEffect 視圖修改器來加入深度效果。如下圖：
Volumes
你的應(yīng)用程序可以在 visionOS 上的同一場景中并排顯示 2D 和 3D 內(nèi)容。在這種情況下，我們可以使用 RealityKit 框架來呈現(xiàn) 3D 內(nèi)容。例如，RealityKit 為我們提供了 Model3D SwiftUI 視圖，允許我們從 USDZ 或?qū)嶋H文件中顯示 3D 模型。
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")
}
}
}Model3D 視圖的工作方式類似于 AsyncImage 視圖，并異步加載模型。你還可以使用 Model3D 初始化器的另一種變體，它允許你自定義模型配置并添加占位視圖。
struct ContentView: View {
var body: some View {
NavigationSplitView {
List(Model.all) { model in
NavigationLink {
Model3D(
url: Bundle.main.url(
forResource: model.name,
withExtension: "usdz"
)!
) { resolved in
resolved
.resizable()
.aspectRatio(contentMode: .fit)
} placeholder: {
ProgressView()
}
} label: {
Text(verbatim: model.name)
}
}
.navigationTitle("Models")
} detail: {
Model3D(named: "robot")
}
}
}在你的應(yīng)用程序中呈現(xiàn) 3D 內(nèi)容時(shí)，你可以使用 windowStyle 修飾符來啟用內(nèi)容的體積顯示。體積樣式允許你的內(nèi)容在第三維中增長，以匹配模型的大小。
對于更復(fù)雜的 3D 場景，我們可以使用 RealityView 并填充它以 3D 內(nèi)容。
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 的第三個(gè)選項(xiàng)是完全沉浸式體驗(yàn)，允許我們通過隱藏周圍的所有內(nèi)容來專注于你的場景。
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
ImmersiveSpace(id: "solar-system") {
SolarSystemView()
}
}
}正如你在上面的示例中所看到的，我們通過使用 ImmersiveSpace 類型來定義場景。它允許我們通過使用 openImmersiveSpace 環(huán)境值來啟用它。
struct MyMenuView: View {
@Environment(\.openImmersiveSpace) private var openImmersiveSpace
var body: some View {
Button("Enjoy immersive space") {
Task {
await openImmersiveSpace(id: "solar-system")
}
}
}
}我們還可以使用 dismissImmersiveSpace 環(huán)境值來關(guān)閉沉浸式空間。請記住，你一次只能顯示一個(gè)沉浸式空間。
struct SolarSystemView: View {
@Environment(\.dismissImmersiveSpace) private var dismiss
var body: some View {
// Immersive experience
Button("Dismiss") {
Task {
await dismiss()
}
}
}
}結(jié)論
在介紹了 SwiftUI 在 visionOS 上的應(yīng)用之后，我們了解到 SwiftUI 可以幫助我們輕松構(gòu)建適應(yīng) visionOS 的應(yīng)用程序。不僅如此，SwiftUI 還提供了許多方便的工具和修飾符，例如 windowStyle 修飾符，可用于在應(yīng)用程序中呈現(xiàn) 3D 內(nèi)容，并使內(nèi)容根據(jù)模型的大小自動適應(yīng)。通過引入沉浸式空間，我們可以將用戶帶入全新的體驗(yàn)，讓他們沉浸在應(yīng)用程序的世界中。總的來說，SwiftUI 為構(gòu)建 visionOS 應(yīng)用程序提供了強(qiáng)大而靈活的工具，我們可以期待在這個(gè)全新的平臺上開發(fā)出令人驚嘆的應(yīng)用體驗(yàn)。
