Tàu vũ trụ

Các thiết bị XR được hỗ trợ
Hướng dẫn này giúp bạn xây dựng các trải nghiệm cho những loại thiết bị XR sau.
Tìm hiểu về các loại thiết bị XR →
Thiết bị đeo đầu XR
Kính thông minh XR có dây
Tìm hiểu về các loại thiết bị XR →

Orbiter là một thành phần không gian mà bạn có thể đính kèm vào một bảng điều khiển không gian hoặc thành phần bố cục không gian tương ứng như SpatialColumn, SpatialRow hoặc SpatialBox. Một orbiter thường chứa các mục điều hướng và hành động theo bối cảnh liên quan đến thực thể mà nó được neo vào. Ví dụ: nếu đã tạo một bảng điều khiển không gian để hiển thị nội dung video, bạn có thể thêm bộ điều khiển chế độ phát video bên trong một thanh điều khiển.

Hình 1.: Ví dụ về tàu quỹ đạo.

Tạo tàu quỹ đạo

Như trong ví dụ sau, hãy gọi một orbiter bên trong bố cục 2D trong SpatialPanel để gói các thành phần điều khiển của người dùng như thành phần điều hướng. Thao tác này sẽ trích xuất các thành phần đó khỏi bố cục 2D và đính kèm vào bảng điều khiển không gian theo cấu hình của bạn. 

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

Các điểm chính về mã

  • Vì orbiter là thành phần giao diện người dùng không gian, nên bạn có thể sử dụng lại mã trong bố cục 2D hoặc 3D. Trong bố cục 2D, ứng dụng của bạn chỉ hiển thị nội dung bên trong orbiter và bỏ qua chính orbiter.
  • Hãy xem hướng dẫn thiết kế của chúng tôi để biết thêm thông tin về cách sử dụng và thiết kế quỹ đạo.

Neo orbiter vào bảng điều khiển và bố cục không gian

Bạn có thể neo một orbiter vào SpatialPanel và các thành phần bố cục không gian được khai báo trong Compose. Việc này bao gồm việc khai báo một orbiter trong bố cục không gian của các phần tử trên giao diện người dùng như SpatialRow, SpatialColumn hoặc SpatialBox. Orbiter liên kết với thành phần mẹ gần nhất với nơi bạn khai báo.

Hành vi của quỹ đạo được xác định theo nơi bạn khai báo:

  • Trong bố cục 2D được gói trong SpatialPanel (như minh hoạ trong đoạn mã trước), trình điều hướng sẽ neo vào SpatialPanel đó.
  • Trong Subspace, orbiter liên kết với thực thể mẹ gần nhất, tức là bố cục không gian mà orbiter được khai báo.

Ví dụ sau đây cho thấy cách neo một orbiter vào một hàng không gian:

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

Các điểm chính về mã

  • Khi bạn khai báo một orbiter bên ngoài bố cục 2D, orbiter sẽ liên kết với thực thể mẹ gần nhất. Trong trường hợp này, quỹ đạo neo vào đầu SpatialRow mà nó được khai báo.
  • Các bố cục không gian như SpatialRow, SpatialColumn, SpatialBox đều có các thực thể không có nội dung liên kết với chúng. Do đó, một quỹ đạo được khai báo trong bố cục không gian sẽ neo vào bố cục đó.