Пространственные панели

Поддерживаемые XR-устройства
Это руководство поможет вам создавать продукты для таких XR-устройств.
Подробнее о типах устройств XR…
XR-шлемы
Проводные XR-очки
Подробнее о типах устройств XR…

SpatialPanel – это composable-функция Subspace, которая позволяет показывать контент приложения, например воспроизводить видео, демонстрировать изображения или любой другой контент на пространственной панели.

Рисунок 1. Пример панели пространственного интерфейса.

С помощью SubspaceModifier можно изменить размер, поведение и положение пространственной панели.

Как создать пространственную панель

В примере ниже показано, как создать пространственную панель.

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

Важные сведения о коде

  • Поскольку API SpatialPanel – это composable-функции подпространства, их нужно вызывать внутри Subspace. Если вызвать их за пределами подпространства, возникнет исключение.
  • Размер SpatialPanel задан с помощью спецификаций height и width в SubspaceModifier. Если вы не укажете эти параметры, размер панели будет определяться размерами ее содержимого.
  • Разрешите пользователю перемещать панель, добавив модификатор подпространства movable.
  • Разрешите пользователю изменять размер панели, добавив модификатор подпространства resizable.
  • Подробную информацию о размерах и расположении можно найти в руководстве по дизайну пространственных панелей. Подробные сведения о реализации кода приведены в справочной документации.

Как работает модификатор movable

Когда пользователь отодвигает панель от себя, модификатор movable по умолчанию масштабирует ее так же, как система изменяет размер панелей в домашнем пространстве. Все дочерние элементы наследуют это поведение. Чтобы отключить эту функцию, задайте для параметра shouldScaleWithDistance значение false.

Как добавить несколько пространственных панелей в пространственный макет

Вы можете создать несколько пространственных панелей и разместить их в пространственном макете с помощью SpatialRow, SpatialColumn, SpatialBox и SpatialSpacer.

Рисунок 2. Пример нескольких пространственных панелей в пространственном макете.

Ниже показано, как это сделать.

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

Важные сведения о коде

  • SpatialRow, SpatialColumn, SpatialBox и SpatialSpacer – это composable-функции подпространства, которые должны быть размещены в подпространстве.
  • Используйте SubspaceModifier, чтобы настроить макет.
  • Для макетов с несколькими панелями в строке рекомендуется задать радиус изгиба 825 dp с помощью SubspaceModifier, чтобы панели окружали пользователя. Подробнее о рекомендациях по дизайну…

Как создавать собственные панели и макеты

Чтобы создать пользовательские панели, которые не поддерживаются Compose for XR, вы можете работать напрямую с экземплярами PanelEntity и графом сцены, используя API SceneCore.