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