Panele przestrzenne

Odpowiednie urządzenia z XR
Te wskazówki pomogą Ci tworzyć treści na te typy urządzeń z XR.
Więcej informacji o typach urządzeń XR →
Gogle XR
Przewodowe okulary XR
Więcej informacji o typach urządzeń XR →

SpatialPanel to komponent podprzestrzeni kompozycyjnej, który umożliwia wyświetlanie treści aplikacji, np. odtwarzanie filmu, obrazy lub inne treści w panelu przestrzennym.

Rysunek 1. Przykład panelu interfejsu przestrzennego.

Możesz użyć SubspaceModifier, aby zmienić rozmiar, zachowanie i pozycję panelu przestrzennego

Tworzenie panelu przestrzennego

Poniższy przykład pokazuje, jak utworzyć panel przestrzenny.

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

Najważniejsze informacje o kodzie

  • Ponieważ interfejsy API SpatialPanel są elementami kompozycyjnymi podprzestrzeni, musisz je wywoływać wewnątrz Subspace. Wywołanie ich poza podprzestrzenią powoduje wyjątek.
  • Rozmiar elementu SpatialPanel został ustawiony za pomocą specyfikacji height i width w elemencie SubspaceModifier. Pominięcie tych specyfikacji pozwala określić rozmiar panelu na podstawie wymiarów jego zawartości.
  • Zezwalaj użytkownikowi na przenoszenie panelu przez dodanie modyfikatora podprzestrzeni movable.
  • Zezwalaj użytkownikowi na zmianę rozmiaru panelu przez dodanie modyfikatora podprzestrzeni resizable.
  • Szczegółowe informacje o rozmiarze i pozycjonowaniu znajdziesz w naszych wskazówkach dotyczących projektowania paneli przestrzennych. Więcej informacji o implementacji kodu znajdziesz w dokumentacji referencyjnej.

Jak działa modyfikator movable

Gdy użytkownik odsuwa panel od siebie, modyfikator movable domyślnie skaluje panel w sposób podobny do tego, jak system zmienia rozmiar paneli w przestrzeni domowej. Wszystkie treści podrzędne dziedziczą to zachowanie. Aby wyłączyć tę funkcję, ustaw parametr shouldScaleWithDistance na false.

Dodawanie wielu paneli przestrzennych do układu przestrzennego

Możesz utworzyć wiele paneli przestrzennych i umieścić je w układzie przestrzennym za pomocą SpatialRow, SpatialColumn, SpatialBox i SpatialSpacer.

Rysunek 2. Przykład wielu paneli przestrzennych w układzie przestrzennym.

Poniższy przykładowy kod pokazuje, jak to zrobić.

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

Najważniejsze informacje o kodzie

Tworzenie niestandardowych paneli i układów

Aby utworzyć panele niestandardowe, które nie są obsługiwane przez Compose for XR, możesz pracować bezpośrednio z instancjami PanelEntity i grafem sceny za pomocą interfejsów API SceneCore.