แผงพื้นที่

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

SpatialPanel คือคอมโพสิเบิลของพื้นที่ย่อยที่ช่วยให้คุณแสดงเนื้อหาของแอปได้ เช่น คุณสามารถแสดงการเล่นวิดีโอ ภาพนิ่ง หรือเนื้อหาอื่นๆ ในแผงเชิงพื้นที่ได้

รูปที่ 1: ตัวอย่างแผง UI เชิงพื้นที่

คุณสามารถใช้ SubspaceModifier เพื่อเปลี่ยนขนาด ลักษณะการทำงาน และตำแหน่งของแผงเชิงพื้นที่ได้

สร้างแผงเชิงพื้นที่

ตัวอย่างต่อไปนี้แสดงวิธีสร้างแผงเชิงพื้นที่

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

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

  • เนื่องจาก API SpatialPanel เป็น Composable ของ Subspace คุณจึงต้องเรียกใช้ภายใน Subspace การเรียกใช้เมธอดเหล่านี้นอกพื้นที่ย่อยจะทำให้เกิดข้อยกเว้น
  • ขนาดของ SpatialPanel ได้รับการตั้งค่าโดยใช้ข้อกำหนด height และ width ใน SubspaceModifier การละเว้นข้อกำหนดเหล่านี้จะทำให้ขนาดของแผงถูกกำหนดโดยการวัดเนื้อหาของแผง
  • อนุญาตให้ผู้ใช้ย้ายแผงโดยเพิ่มตัวแก้ไขพื้นที่ย่อย movable
  • อนุญาตให้ผู้ใช้ปรับขนาดแผงโดยเพิ่มตัวแก้ไขพื้นที่ย่อย resizable
  • ดูรายละเอียดเกี่ยวกับขนาดและการจัดตำแหน่งได้ที่คำแนะนำในการออกแบบแผงเชิงพื้นที่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการติดตั้งใช้งานโค้ดได้ในเอกสารอ้างอิง

วิธีการทำงานของตัวแก้ไข movable

เมื่อผู้ใช้ย้ายแผงออกจากตัว โดยค่าเริ่มต้น ตัวปรับแต่ง movable จะปรับขนาดแผงในลักษณะที่คล้ายกับวิธีที่ระบบปรับขนาดแผงในพื้นที่บ้าน เนื้อหาย่อยทั้งหมดจะรับช่วงลักษณะการทำงานนี้ หากต้องการปิดใช้ ให้ตั้งค่าพารามิเตอร์ shouldScaleWithDistance เป็น false

เพิ่มแผงเชิงพื้นที่หลายแผงลงในเลย์เอาต์เชิงพื้นที่

คุณสามารถสร้างแผงเชิงพื้นที่หลายแผงและวางไว้ในเลย์เอาต์เชิงพื้นที่โดยใช้ SpatialRow, SpatialColumn, SpatialBox และ SpatialSpacer

รูปที่ 2 ตัวอย่างแผงเชิงพื้นที่หลายแผงในเลย์เอาต์เชิงพื้นที่

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีการดำเนินการดังกล่าว

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

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

  • SpatialRow, SpatialColumn, SpatialBox และ SpatialSpacer ล้วนเป็น Composable ของ Subspace และต้องวางไว้ภายใน Subspace
  • ใช้ SubspaceModifier เพื่อปรับแต่งเลย์เอาต์
  • สำหรับเลย์เอาต์ที่มีหลายแผงในแถวเดียว เราขอแนะนำให้ตั้งค่ารัศมีความโค้งเป็น 825dp โดยใช้ SubspaceModifier เพื่อให้แผงล้อมรอบผู้ใช้ ดูรายละเอียดได้ที่คำแนะนำด้านการออกแบบ

สร้างแผงและเลย์เอาต์ที่กำหนดเอง

หากต้องการสร้างแผงที่กำหนดเองซึ่ง Compose for XR ไม่รองรับ คุณสามารถทำงานกับอินสแตนซ์ PanelEntity และกราฟฉากได้โดยตรงโดยใช้ API SceneCore