Bảng điều khiển không gian

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 →

SpatialPanel là một thành phần kết hợp không gian con cho phép bạn hiển thị nội dung của ứng dụng, chẳng hạn như bạn có thể hiển thị video phát lại, hình ảnh tĩnh hoặc bất kỳ nội dung nào khác trong bảng điều khiển không gian.

Hình 1.: Ví dụ về bảng điều khiển giao diện người dùng không gian.

Bạn có thể sử dụng SubspaceModifier để thay đổi kích thước, hành vi và vị trí của bảng điều khiển không gian

Tạo bảng điều khiển không gian

Ví dụ sau đây cho thấy cách tạo một bảng điều khiển không gian.

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

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

  • Vì API SpatialPanel là thành phần kết hợp không gian con, nên bạn phải gọi các API này bên trong Subspace. Việc gọi các hàm này bên ngoài một không gian con sẽ gửi một ngoại lệ.
  • Kích thước của SpatialPanel đã được đặt bằng cách sử dụng thông số kỹ thuật height và width trên SubspaceModifier. Nếu bạn bỏ qua các thông số kỹ thuật này, thì kích thước của bảng điều khiển sẽ được xác định bằng số đo của nội dung trong bảng điều khiển.
  • Cho phép người dùng di chuyển bảng điều khiển bằng cách thêm đối tượng sửa đổi không gian phụ movable.
  • Cho phép người dùng đổi kích thước bảng điều khiển bằng cách thêm đối tượng sửa đổi không gian phụ resizable.
  • Hãy xem hướng dẫn thiết kế bảng điều khiển không gian của chúng tôi để biết thông tin chi tiết về cách định cỡ và định vị. Hãy xem tài liệu tham khảo của chúng tôi để biết thêm thông tin cụ thể về cách triển khai mã.

Cách hoạt động của đối tượng sửa đổi movable

Khi người dùng di chuyển một bảng điều khiển ra xa, theo mặc định, đối tượng sửa đổi movable sẽ điều chỉnh tỷ lệ của bảng điều khiển theo cách tương tự như cách hệ thống đổi kích thước bảng điều khiển trong không gian chính. Tất cả nội dung con đều kế thừa hành vi này. Để tắt tính năng này, hãy đặt tham số shouldScaleWithDistance thành false.

Thêm nhiều bảng điều khiển không gian vào một bố cục không gian

Bạn có thể tạo nhiều bảng điều khiển không gian và đặt chúng trong một bố cục không gian bằng cách sử dụng SpatialRow, SpatialColumn, SpatialBox và SpatialSpacer.

Hình 2.: Ví dụ về nhiều bảng điều khiển không gian trong một bố cục không gian.

Ví dụ về mã sau đây cho biết cách thực hiện việc này.

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

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

  • SpatialRow, SpatialColumn, SpatialBox và SpatialSpacer đều là các thành phần kết hợp không gian con và phải được đặt trong một không gian con.
  • Sử dụng SubspaceModifier để tuỳ chỉnh bố cục.
  • Đối với bố cục có nhiều bảng điều khiển trong một hàng, bạn nên đặt bán kính đường cong là 825 dp bằng cách sử dụng SubspaceModifier để các bảng điều khiển bao quanh người dùng. Hãy xem hướng dẫn thiết kế của chúng tôi để biết thông tin chi tiết.

Tạo bảng điều khiển và bố cục tuỳ chỉnh

Để tạo bảng điều khiển tuỳ chỉnh không được Compose cho XR hỗ trợ, bạn có thể làm việc trực tiếp với các thực thể PanelEntity và biểu đồ cảnh bằng API SceneCore.