轨道器

适用的 XR 设备
本指南可帮助您为以下类型的 XR 设备打造优质体验。
了解 XR 设备类型 →
扩展现实头戴设备
有线扩展现实眼镜
了解 XR 设备类型 →

Orbiter 是一种空间化组件，您可以将其附加到相应的空间面板或空间布局组件，例如 SpatialColumn、SpatialRow 或 SpatialBox。轨道器通常包含与其锚定的实体相关的导航和关联操作项。例如，如果您创建了一个用于显示视频内容的空间面板，则可以在 Orbiter 中添加视频播放控件。

图 1：轨道飞行器示例。

创建轨道飞行器

如以下示例所示，在 SpatialPanel 中的 2D 布局内调用轨道器，以封装导航等用户控件。这样做会将它们从 2D 布局中提取出来，并根据您的配置将其附加到空间面板。

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

@Composable
fun OrbiterExample() {
    Orbiter(
        position = OrbiterPosition.BottomCenter(
            verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
            offset = DpVolumeOffset(y = 96.dp)
        ),
    ) {
        Surface(Modifier.clip(CircleShape)) {
            Row(
                Modifier
                    .background(color = Color.Black)
                    .height(100.dp)
                    .width(600.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Orbiter",
                    color = Color.White,
                    fontSize = 50.sp
                )
            }
        }
    }
}

代码要点

  • 由于轨道器是空间界面组件，因此代码可以在 2D 或 3D 布局中重复使用。在 2D 布局中，应用仅渲染 Orbiter 内部的内容，并忽略 Orbiter 本身。
  • 如需详细了解如何使用和设计轨道器，请参阅我们的设计指南。

将轨道器锚定到空间面板和布局

您可以将 Orbiter 锚定到 SpatialPanel 和 Compose 中声明的空间布局组件。这涉及在界面元素（例如 SpatialRow、SpatialColumn 或 SpatialBox）的空间布局中声明 Orbiter。Orbiter 会锚定到距离您声明它的位置最近的父级。

轨道器的行为取决于您在何处声明它：

  • 在封装在 SpatialPanel 中的 2D 布局中（如前面的代码段所示），Orbiter 会锚定到该 SpatialPanel。
  • 在 Subspace 中，轨道器会锚定到最近的父实体，即声明轨道器的空间布局。

以下示例展示了如何将 Orbiter 锚定到空间行：

Subspace {
    SpatialRow {
        Orbiter(
            position = OrbiterPosition.TopCenter(
                verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
                offset = DpVolumeOffset(y = 8.dp)
            ),
            shape = SpatialRoundedCornerShape(size = CornerSize(50))
        ) {
            Text(
                "Hello World!",
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .background(Color.White)
                    .padding(16.dp)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Red)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Blue)
            )
        }
    }
}

代码要点

  • 在 2D 布局之外声明轨道器时，轨道器会锚定到其最近的父实体。在这种情况下，轨道器会锚定到其声明所在的 SpatialRow 的顶部。
  • 空间布局（例如 SpatialRow、SpatialColumn、SpatialBox）都具有与其关联的无内容实体。因此，在空间布局中声明的 Orbiter 会锚定到该布局。