Implementare Material Design per XR

Material Design fornisce componenti e layout che si adattano all'XR. Con la libreria Material 3 esistente, i componenti e i layout adattabili vengono migliorati con i comportamenti dell'interfaccia utente spaziale.

Puoi adattare l'attuale implementazione di M3 aggiungendo il wrapper EnableXrComponentOverrides.

Utilizzare EnableXrComponentOverrides per adattare l'app esistente

Tutta l'interfaccia utente di Compose di M3 all'interno del wrapper EnableXrComponentOverrides si adatterà ai dispositivi VR. Questo wrapper ti consente di scegliere i componenti da escludere da questo comportamento.

Aggiungi il wrapper EnableXrComponentOverrides per adattare l'app a Material Design per XR.

La barra di navigazione in qualsiasi layout di Componi, incluso NavigationSuiteScaffold, si adatterà automaticamente a XR Orbiter. Per ulteriori informazioni, leggi le linee guida di Material Design.

Barra di navigazione non spazializzata
Barra di navigazione spazializzata (adattata per XR)

La barra di navigazione in qualsiasi layout di composizione, incluso NavigationSuiteScaffold, si adatterà automaticamente all'orbiter XR. Per ulteriori informazioni, leggi le linee guida di Material Design.

Barra di navigazione non spazializzata
Barra di navigazione spazializzata (adattata per la realtà virtuale)

Layout elenco dettagliato per XR

I layout adattivi di Material 3 in XR hanno una mappatura 1:1 in cui ogni riquadro è posizionato all'interno del proprio riquadro spaziale XR. Scopri di più su ListDetailPaneScaffold e sulle linee guida per il design adattivo.

Non spazializzato ListDetailPaneScaffold
ListDetailPaneScaffold spazializzato (adattato per XR)

Layout del riquadro di assistenza per XR

I layout adattivi di Material 3 in XR hanno una mappatura 1:1 in cui ogni riquadro è posizionato all'interno del proprio riquadro spaziale XR. Scopri di più su SupportingPaneScaffold e sulle linee guida per il design adattivo.

SupportingPaneScaffold non spazializzato
SupportingPaneScaffold spazializzato (adattato per XR)

Inizia a progettare con il Material 3 Design Kit per Figma

Collage di elementi del kit di design Material 3

Scarica il kit di progettazione Material 3 per iniziare

Vedi anche