实现适用于 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)导航栏

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

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

非空间化导航栏

非空间化导航栏

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

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

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

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

非空间化 ListDetailPaneScaffold

非空间化 ListDetailPaneScaffold

空间化(适用于 XR)的 ListDetailPaneScaffold

空间化(适用于 XR)的 ListDetailPaneScaffold

支持 XR 的窗格布局

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

非空间化 SupportingPaneScaffold

非空间化 SupportingPaneScaffold

空间化(适用于 XR)SupportingPaneScaffold

空间化(适用于 XR)SupportingPaneScaffold

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

Material 3 Design Kit 中元素的拼图

下载 Material 3 Design Kit 开始使用

另请参阅