Material Design bietet Komponenten und Layouts, die sich an XR anpassen. Mithilfe der vorhandenen Material 3-Bibliothek werden Komponenten und adaptive Layouts um räumliche UI-Verhaltene erweitert.
Sie können Ihre aktuelle M3-Implementierung anpassen, indem Sie den EnableXrComponentOverrides-Wrapper hinzufügen. Fügen Sie die XR Compose Material3-Bibliothek zu den Abhängigkeiten Ihrer App hinzu.
Vorhandene App mit EnableXrComponentOverrides anpassen
Die gesamte M3 Compose-Benutzeroberfläche im EnableXrComponentOverrides-Wrapper wird an XR-Geräte angepasst. Mit diesem Wrapper können Sie Komponenten auswählen, die von diesem Verhalten ausgeschlossen werden sollen.
Fügen Sie den EnableXrComponentOverrides-Wrapper hinzu, um Ihre App an Material Design für XR anzupassen.
Navigationsstreifen
Die Navigationsleiste in jedem Compose-Layout, einschließlich NavigationSuiteScaffold, passt sich automatisch an XR Orbiter an. Weitere Informationen finden Sie in den Material Design-Richtlinien.
Nicht räumlicher Navigationsstreifen
Räumlich dargestellter (für XR angepasster) Navigationsstreifen
Navigationsleiste
Die Navigationsleiste in jedem Compose-Layout, einschließlich NavigationSuiteScaffold, wird automatisch an XR-Orbiter angepasst. Weitere Informationen finden Sie in den Material Design-Richtlinien.
Nicht räumliche Navigationsleiste
Räumliche (XR-adaptierte) Navigationsleiste
Dialogfelder
Ein BasicAlertDialog passt sich an XR an und fügt der Komponente eine Höhe hinzu.
Weitere Informationen zu Dialogen und Richtlinien für adaptives Design
Nicht ortsbezogener Dialog
Raumliches (XR-adaptiertes) Dialogfeld
Obere App-Leisten
Ein TopAppBar passt sich automatisch an XR-Orbiter an.
Weitere Informationen zu oberen App-Leisten und Richtlinien für adaptives Design
Nicht räumliche obere App-Leiste
Räumliche (XR-adaptierte) obere App-Leiste
Listendetaillayout für XR
Adaptive Material 3-Layouts in XR haben eine 1:1-Zuordnung, bei der jeder Bereich in einem eigenen XR-Raumbereich platziert wird. Weitere Informationen zu ListDetailPaneScaffold und den Richtlinien für adaptives Design
Nicht räumlich dargestellte ListDetailPaneScaffold
Räumliche (XR-adaptierte) ListDetailPaneScaffold
Supportbereichslayout für XR
Adaptive Material 3-Layouts in XR haben eine 1:1-Zuordnung, bei der jeder Bereich in einem eigenen XR-Raumbereich platziert wird. Weitere Informationen zu SupportingPaneScaffold und den Richtlinien für adaptives Design
Nicht räumlich unterstützte SupportingPaneScaffold
Räumlich (XR-adaptiert) unterstützte Ansicht
Mit dem Material 3 Design Kit für Figma beginnen
Material 3-Designkit herunterladen