Pannelli spaziali

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Scopri di più sui tipi di dispositivi XR →
Visori XR
Occhiali XR con cavo
Scopri di più sui tipi di dispositivi XR →

Un SpatialPanel è un componibile di sottospazio che ti consente di mostrare i contenuti della tua app, ad esempio la riproduzione di video, immagini fisse o qualsiasi altro contenuto in un pannello spaziale.

Figura 1: Esempio di un pannello UI spaziale.

Puoi utilizzare SubspaceModifier per modificare le dimensioni, il comportamento e il posizionamento del pannello spaziale

Crea un pannello spaziale

L'esempio seguente mostra come creare un pannello spaziale.

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
            .movable()
            .resizable(),
    ) {
        SpatialPanelContent()
    }
}

@Composable
fun SpatialPanelContent() {
    Box(
        Modifier
            .background(color = Color.Black)
            .height(500.dp)
            .width(500.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Spatial Panel",
            color = Color.White,
            fontSize = 25.sp
        )
    }
}

Punti chiave sul codice

  • Poiché le API SpatialPanel sono componibili di Subspace, devi chiamarle all'interno di Subspace. La loro chiamata al di fuori di un sottospazio genera un'eccezione.
  • Le dimensioni di SpatialPanel sono state impostate utilizzando le specifiche height e width su SubspaceModifier. Se ometti queste specifiche, le dimensioni del riquadro verranno determinate dalle misure dei suoi contenuti.
  • Consenti all'utente di spostare un riquadro aggiungendo un modificatore di sottospazio movable.
  • Consenti all'utente di ridimensionare un riquadro aggiungendo un modificatore di sottospazio resizable.
  • Per informazioni dettagliate su dimensioni e posizionamento, consulta le nostre linee guida per la progettazione di pannelli spaziali. Per ulteriori dettagli sull'implementazione del codice, consulta la nostra documentazione di riferimento.

Come funziona il modificatore movable

Quando un utente allontana un pannello, per impostazione predefinita il modificatore movable scala il pannello in modo simile a come i pannelli vengono ridimensionati dal sistema nello spazio della casa. Tutti i contenuti secondari ereditano questo comportamento. Per disattivare questa opzione, imposta il parametro shouldScaleWithDistance su false.

Aggiungi più pannelli spaziali a un layout spaziale

Puoi creare più pannelli spaziali e posizionarli all'interno di un layout spaziale utilizzando SpatialRow, SpatialColumn, SpatialBox e SpatialSpacer.

Figura 2: Esempio di più riquadri spaziali in un layout spaziale.

L'esempio di codice seguente mostra come eseguire questa operazione.

Subspace {
    SpatialRow {
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Left")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Left")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Left")
            }
        }
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Right")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Right")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Right")
            }
        }
    }
}

@Composable
fun SpatialPanelContent(text: String) {
    Column(
        Modifier
            .background(color = Color.Black)
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Panel",
            color = Color.White,
            fontSize = 15.sp
        )
        Text(
            text = text,
            color = Color.White,
            fontSize = 25.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

Punti chiave sul codice

  • SpatialRow, SpatialColumn, SpatialBox e SpatialSpacer sono tutti elementi componibili di sottospazio e devono essere posizionati all'interno di un sottospazio.
  • Utilizza SubspaceModifier per personalizzare il layout.
  • Per i layout con più riquadri in una riga, consigliamo di impostare un raggio di curvatura di 825 dp utilizzando un SubspaceModifier in modo che i riquadri circondino l'utente. Per maggiori dettagli, consulta le nostre indicazioni per la progettazione.

Crea layout e pannelli personalizzati

Per creare pannelli personalizzati non supportati da Compose for XR, puoi lavorare direttamente con le istanze PanelEntity e il grafico della scena utilizzando le API SceneCore.