Kartenbereiche

XR‑Geräte, für die der Leitfaden gilt
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.
Informationen zu XR-Gerätetypen →
XR-Headsets
Kabelgebundene XR-Datenbrille
Informationen zu XR-Gerätetypen →

Ein SpatialPanel ist ein Subspace-Composable, mit dem Sie die Inhalte Ihrer App anzeigen können. Sie können beispielsweise die Videowiedergabe, Standbilder oder andere Inhalte in einem räumlichen Bereich anzeigen.

Abbildung 1: Beispiel für einen Bereich der räumlichen Benutzeroberfläche

Mit SubspaceModifier können Sie die Größe, das Verhalten und die Position des räumlichen Bereichs ändern.

Spatial-Bereich erstellen

Im folgenden Beispiel wird gezeigt, wie ein räumliches Steuerfeld erstellt wird.

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
        )
    }
}

Wichtige Punkte zum Code

  • Da SpatialPanel-APIs Subspace-Kompositionen sind, müssen Sie sie innerhalb von Subspace aufrufen. Wenn Sie sie außerhalb eines Unterbereichs aufrufen, wird eine Ausnahme ausgelöst.
  • Die Größe des SpatialPanel wurde mit den Spezifikationen height und width für den SubspaceModifier festgelegt. Wenn Sie diese Angaben weglassen, wird die Größe des Bereichs durch die Abmessungen seines Inhalts bestimmt.
  • Ermöglichen Sie dem Nutzer, ein Steuerfeld zu verschieben, indem Sie einen movable-Subspace-Modifikator hinzufügen.
  • Ermöglichen Sie dem Nutzer, die Größe eines Bereichs zu ändern, indem Sie den Unterbereichsmodifikator resizable hinzufügen.
  • Weitere Informationen zur Größe und Positionierung findest du in unseren Designrichtlinien für räumliche Bereiche. Weitere Informationen zur Codeimplementierung finden Sie in unserer Referenzdokumentation.

Funktionsweise des Modifikators movable

Wenn ein Nutzer ein Steuerfeld von sich wegbewegt, wird es standardmäßig mit dem Modifikator movable ähnlich skaliert, wie Steuerfelder vom System im Home Space skaliert werden. Alle untergeordneten Inhalte übernehmen dieses Verhalten. Wenn Sie diese Funktion deaktivieren möchten, setzen Sie den Parameter shouldScaleWithDistance auf false.

Einem räumlichen Layout mehrere räumliche Bereiche hinzufügen

Sie können mehrere räumliche Bereiche erstellen und sie mit SpatialRow, SpatialColumn, SpatialBox und SpatialSpacer in einem räumlichen Layout platzieren.

Abbildung 2: Beispiel für mehrere räumliche Bereiche in einem räumlichen Layout.

Das folgende Codebeispiel zeigt, wie das geht.

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
        )
    }
}

Wichtige Punkte zum Code

  • SpatialRow, SpatialColumn, SpatialBox und SpatialSpacer sind allesamt Subspace-Kompositionen und müssen in einem Subspace platziert werden.
  • Verwenden Sie SubspaceModifier, um das Layout anzupassen.
  • Für Layouts mit mehreren Bereichen in einer Reihe empfehlen wir, einen Kurvenradius von 825 dp mit einem SubspaceModifier festzulegen, damit die Bereiche den Nutzer umgeben. Weitere Informationen finden Sie in unseren Designrichtlinien.

Benutzerdefinierte Bereiche und Layouts erstellen

Wenn Sie benutzerdefinierte Bereiche erstellen möchten, die von Compose for XR nicht unterstützt werden, können Sie mit den SceneCore APIs direkt mit PanelEntity-Instanzen und dem Szenengraphen arbeiten.