Material Design 为 XR 提供了组件和布局。使用 Material 3 库、自适应布局和 XR Compose Material 3 库，您可以将空间界面行为构建到 Compose 应用中。
将 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 库为常见的空间界面模式提供了 Material 3 for XR 组件，包括导航栏、顶部应用栏、悬浮工具栏、对话框、列表详情布局，以及用于在主共享空间和全沉浸空间之间切换的切换按钮。此库中的空间化 Spatial* 可组合项处于实验阶段，需要使用 @OptIn(ExperimentalMaterial3XrApi::class) 选择启用。
检查 LocalSpatialCapabilities.current.isSpatialUiEnabled，以便在启用空间界面时呈现 Material 3 for XR 组件，在未启用空间界面时呈现标准 Material 3 组件。如需了解详情，请参阅检查空间功能。
侧边导航栏
启用空间界面后，使用 SpatialNavigationRail 或 SpatialWideNavigationRail 在起始对齐的 Orbiter 中显示 Material 3 导航栏。如需了解详情，请参阅 Material Design 指南。
非空间化侧边导航栏
空间化（XR 适配）侧边导航栏
导航栏
启用空间界面后，使用 SpatialNavigationBar 或 SpatialShortNavigationBar 在底部对齐的 Orbiter 中显示 Material 3 导航栏。如需了解详情，请参阅 Material Design 指南。
非空间化导航栏
空间化（XR 适配）导航栏
对话框
使用 SpatialBasicAlertDialog 在具有空间高度的 SpatialDialog 中显示基本提醒对话框，或直接在 SpatialDialog 中封装标准 Material 3 对话框内容。
非空间化对话
空间化（XR 适配）对话框
顶部应用栏
启用空间界面后，使用 SpatialTopAppBar 或 SpatialTwoRowsTopAppBar 在顶部对齐的 Orbiter 中显示 Material 3 顶部应用栏。
非空间化顶部应用栏
空间化（XR 适配）顶部应用栏
适用于 XR 的列表-详情布局
启用空间界面后，使用 SpatialListDetailPaneScaffold 可显示 Material 3 自适应列表-详情布局，其中每个窗格都放置在各自的 SpatialPanel 中。如果未启用空间界面，请使用 ListDetailPaneScaffold。如需了解详情，请参阅列表详情布局和自适应设计指南。
非空间化 ListDetailPaneScaffold
空间化（XR 适配）ListDetailPaneScaffold
XR 的辅助窗格布局
启用空间界面后，将主窗格和辅助窗格放入 Subspace 内 SpatialRow 中的单独 SpatialPanel 容器中。如果未启用空间界面，请使用 SupportingPaneScaffold。如需了解详情，请参阅辅助窗格和自适应设计指南。
非空间化 SupportingPaneScaffold
空间化（XR 适配）SupportingPaneScaffold
开始使用适用于 Figma 的 Material 3 设计套件进行设计
下载 Material 3 Design Kit 即可开始使用