ยานอวกาศ

อุปกรณ์ XR ที่รองรับ
คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทนี้
ชุดหูฟัง XR
แว่นตา XR แบบใช้สาย

Orbiter คือคอมโพเนนต์เชิงพื้นที่ที่คุณสามารถแนบกับแผงเชิงพื้นที่หรือคอมโพเนนต์เลย์เอาต์เชิงพื้นที่ที่เกี่ยวข้อง เช่น SpatialColumn, SpatialRow หรือ SpatialBox โดยทั่วไปแล้ว Orbiter จะมีรายการการนำทางและการดำเนินการตามบริบทที่เกี่ยวข้องกับเอนทิตีที่ยึดอยู่ เช่น หากคุณสร้างแผงเชิงพื้นที่เพื่อแสดงเนื้อหาวิดีโอ คุณสามารถเพิ่มตัวควบคุมการเล่นวิดีโอภายใน Orbiter ได้

รูปที่ 1: ตัวอย่างของยานอวกาศ

สร้างยานอวกาศ

ดังที่แสดงในตัวอย่างต่อไปนี้ ให้เรียก Orbiter ภายในเลย์เอาต์ 2 มิติใน SpatialPanel เพื่อรวมการควบคุมของผู้ใช้ เช่น การนำทาง การดำเนินการนี้จะดึงข้อมูลออกจากเลย์เอาต์ 2 มิติและแนบข้อมูลเหล่านั้นกับแผงเชิงพื้นที่ตามการกำหนดค่าของคุณ

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

ประเด็นสำคัญเกี่ยวกับโค้ด

  • เนื่องจาก Orbiter เป็นคอมโพเนนต์ UI เชิงพื้นที่ จึงสามารถนำโค้ดมาใช้ซ้ำในเลย์เอาต์ 2 มิติหรือ 3 มิติได้ ในเลย์เอาต์ 2 มิติ แอปจะแสดงผลเฉพาะเนื้อหาภายใน Orbiter และละเว้นตัว Orbiter เอง
  • ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้และออกแบบ Orbiter ได้ที่คำแนะนำด้านการออกแบบ

ตรึง Orbiter ไว้กับแผงและเลย์เอาต์เชิงพื้นที่

คุณสามารถยึด Orbiter ไว้กับ SpatialPanel และคอมโพเนนต์เลย์เอาต์เชิงพื้นที่ที่ประกาศใน Compose ได้ ซึ่งเกี่ยวข้องกับการประกาศ Orbiter ในเลย์เอาต์เชิงพื้นที่ขององค์ประกอบ UI เช่น SpatialRow, SpatialColumn หรือ SpatialBox Orbiter จะยึดกับองค์ประกอบหลักที่อยู่ใกล้กับตำแหน่งที่คุณประกาศไว้มากที่สุด

ลักษณะการทำงานของ Orbiter จะกำหนดโดยตำแหน่งที่คุณประกาศ ดังนี้

  • ในเลย์เอาต์ 2 มิติที่รวมอยู่ใน SpatialPanel (ดังที่แสดงในข้อมูลโค้ดก่อนหน้า) Orbiter จะยึดกับ SpatialPanel นั้น
  • ใน Subspace Orbiter จะยึดกับเอนทิตีหลักที่ใกล้ที่สุด ซึ่งเป็นเลย์เอาต์เชิงพื้นที่ที่มีการประกาศ Orbiter ไว้

ตัวอย่างต่อไปนี้แสดงวิธีตรึง 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)
            )
        }
    }
}

ประเด็นสำคัญเกี่ยวกับโค้ด

  • เมื่อคุณประกาศ Orbiter นอกเลย์เอาต์ 2 มิติ Orbiter จะยึดกับเอนทิตีหลักที่อยู่ใกล้ที่สุด ในกรณีนี้ Orbiter จะยึดกับด้านบนของ SpatialRow ที่ประกาศไว้
  • เลย์เอาต์เชิงพื้นที่ เช่น SpatialRow, SpatialColumn, SpatialBox ล้วนมีเอนทิตีที่ไม่มีเนื้อหาเชื่อมโยงอยู่ ดังนั้น Orbiter ที่ประกาศในเลย์เอาต์เชิงพื้นที่จะยึดกับเลย์เอาต์นั้น