為空間 UI 實作 Material Design

Material Design 提供 XR 的元件和版面配置。使用 Material 3 程式庫、自動調整式版面配置和 XR Compose Material 3 程式庫，即可在 Compose 應用程式中建構空間 UI 行為。

將 XR Compose Material 3 程式庫新增至應用程式的依附元件，以便使用 Material 3 for XR 元件，或將標準 Material 3 元件直接放入 Jetpack Compose for XR 容器中，例如 Orbiter、SpatialDialog 和 SpatialPanel。

使用 Material 3 for XR 元件

androidx.xr.compose.material3 程式庫提供 XR 適用的 Material 3 元件，可用於常見的空間 UI 模式，包括導覽邊欄和導覽列、頂端應用程式列、浮動工具列、對話方塊、清單詳細資料版面配置，以及用於切換主畫面和全螢幕的切換鈕。這個程式庫中的空間化 Spatial* 可組合項處於實驗階段，必須使用 @OptIn(ExperimentalMaterial3XrApi::class) 選擇加入。

勾選 LocalSpatialCapabilities.current.isSpatialUiEnabled，即可在啟用空間 UI 時算繪 Material 3 for XR 元件，並在未啟用空間 UI 時算繪標準 Material 3 元件。詳情請參閱「檢查空間功能」。

導覽邊欄

啟用空間 UI 時，請使用 SpatialNavigationRail 或 SpatialWideNavigationRail，在靠左對齊的 Orbiter 中顯示 Material 3 導覽邊欄。詳情請參閱 Material Design 指南。

導覽列

啟用空間 UI 時，請使用 SpatialNavigationBar 或 SpatialShortNavigationBar，在底部對齊的 Orbiter 中顯示 Material 3 導覽列。詳情請參閱 Material Design 指南。

對話方塊

使用 SpatialBasicAlertDialog 在具有空間高度的 SpatialDialog 中顯示基本快訊對話方塊，或直接在 SpatialDialog 中包裝標準 Material 3 對話方塊內容。

詳情請參閱「對話方塊」和自動調整設計指南。

頂端應用程式列

啟用空間 UI 時，請使用 SpatialTopAppBar 或 SpatialTwoRowsTopAppBar，在頂端對齊的 Orbiter 中顯示 Material 3 頂端應用程式列。

詳情請參閱「頂端應用程式列」和「自動調整設計指南」。

XR 的清單/詳細資料版面配置

啟用空間 UI 時，請使用 SpatialListDetailPaneScaffold 顯示 Material 3 自動調整清單詳細資料版面配置，其中每個窗格都位於各自的 SpatialPanel 中。如果未啟用空間 UI，請使用 ListDetailPaneScaffold。詳情請參閱清單詳細資料版面配置和自動調整設計指南。

XR 的輔助窗格版面配置

啟用空間 UI 後，請將主要窗格和輔助窗格放入 Subspace 內 SpatialRow 中的獨立 SpatialPanel 容器。如果未啟用空間 UI，請使用 SupportingPaneScaffold。詳情請參閱「輔助窗格」和自動調整設計指南。

開始使用 Figma 的 Material 3 設計套件

下載 Material 3 Design Kit 即可開始使用

另請參閱

• 使用 Jetpack Compose for XR 開發 UI
• 從主畫面空間轉換為全螢幕
• 空間 UI 設計指南