实现适用于 XR 的 Material Design

Material Design 提供了可适应 XR 的组件和布局。使用现有的 Material 3 库,组件和自适应布局通过空间界面行为得到增强。

您可以通过添加 EnableXrComponentOverrides 封装容器来调整当前的 M3 实现。

使用 EnableXrComponentOverrides 调整现有应用

EnableXrComponentOverrides 封装容器内的所有 M3 Compose 界面都将在 XR 设备上自适应。借助此封装容器,您可以选择要从此行为中排除的任何组件。

添加 EnableXrComponentOverrides 封装容器,以便将应用适应适用于 XR 的 Material Design。

任何 Compose 布局(包括 NavigationSuiteScaffold)中的侧边导航栏都会自动适应 XR Orbiter。如需了解详情,请参阅 Material Design 指南

非空间化导航栏
空间化(适用于 XR)导航栏

任何 Compose 布局(包括 NavigationSuiteScaffold)中的导航栏都会自动适应 XR 导航器。如需了解详情,请参阅 Material Design 指南

非空间化导航栏
空间化(适用于 XR)导航栏

适用于 XR 的列表-详情布局

XR 中的 Compose Material 3 自适应布局具有 1:1 映射,每个窗格都放置在自己的 XR 空间面板内。详细了解 ListDetailPaneScaffold自适应设计指南

非空间化 ListDetailPaneScaffold
空间化(适用于 XR)的 ListDetailPaneScaffold

支持 XR 的窗格布局

XR 中的 Compose Material 3 自适应布局具有 1:1 映射,每个窗格都放置在自己的 XR 空间面板内。详细了解 SupportingPaneScaffold自适应设计指南

非空间化 SupportingPaneScaffold
空间化(适用于 XR)SupportingPaneScaffold

使用适用于 Figma 的 Material 3 设计套件开始设计

Material 3 Design Kit 中元素的拼图

下载 Material 3 Design Kit 开始使用

另请参阅