Panel spasial

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Headset XR
Kacamata XR Berkabel
Mempelajari jenis perangkat XR →

SpatialPanel adalah composable subruang yang memungkinkan Anda menampilkan konten aplikasi–misalnya, Anda dapat menampilkan pemutaran video, gambar diam, atau konten lainnya di panel spasial.

Gambar 1.: Contoh panel UI spasial.

Anda dapat menggunakan SubspaceModifier untuk mengubah ukuran, perilaku, dan posisi panel spasial

Membuat panel spasial

Contoh berikut menunjukkan cara membuat panel spasial.

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

Poin penting tentang kode

  • Karena API SpatialPanel adalah composable subruang, Anda harus memanggilnya di dalam Subspace. Memanggilnya di luar sub-ruang akan menampilkan pengecualian.
  • Ukuran SpatialPanel telah ditetapkan menggunakan spesifikasi height dan width pada SubspaceModifier. Dengan menghilangkan spesifikasi ini, ukuran panel akan ditentukan oleh pengukuran kontennya.
  • Izinkan pengguna memindahkan panel dengan menambahkan pengubah subruang movable.
  • Izinkan pengguna mengubah ukuran panel dengan menambahkan pengubah subruang resizable.
  • Lihat panduan desain panel spasial kami untuk mengetahui detail tentang ukuran dan pemosisian. Lihat dokumentasi referensi kami untuk mengetahui detail selengkapnya tentang penerapan kode.

Cara kerja pengubah movable

Saat pengguna menjauhkan panel, pengubah movable secara default akan menskalakan panel dengan cara yang mirip dengan cara panel diubah ukurannya oleh sistem di ruang beranda. Semua konten turunan mewarisi perilaku ini. Untuk menonaktifkannya, tetapkan parameter shouldScaleWithDistance ke false.

Menambahkan beberapa panel spasial ke tata letak spasial

Anda dapat membuat beberapa panel spasial dan menempatkannya dalam tata letak spasial menggunakan SpatialRow, SpatialColumn, SpatialBox, dan SpatialSpacer.

Gambar 2.: Contoh beberapa panel spasial dalam tata letak spasial.

Contoh kode berikut menunjukkan cara melakukannya.

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

Poin penting tentang kode

  • SpatialRow, SpatialColumn, SpatialBox, dan SpatialSpacer semuanya adalah composable subruang dan harus ditempatkan dalam subruang.
  • Gunakan SubspaceModifier untuk menyesuaikan tata letak Anda.
  • Untuk tata letak dengan beberapa panel dalam satu baris, sebaiknya tetapkan radius lengkungan 825 dp menggunakan SubspaceModifier agar panel mengelilingi pengguna. Lihat panduan desain kami untuk mengetahui detailnya.

Membuat panel dan tata letak kustom

Untuk membuat panel kustom yang tidak didukung oleh Compose untuk XR, Anda dapat bekerja langsung dengan instance PanelEntity dan grafik tampilan menggunakan API SceneCore.