SpatialPanel एक सबस्पेस कंपोज़ेबल है. इसकी मदद से, अपने ऐप्लिकेशन का कॉन्टेंट दिखाया जा सकता है. उदाहरण के लिए, स्पेशल पैनल में वीडियो प्लेबैक, स्टिल इमेज या कोई अन्य कॉन्टेंट दिखाया जा सकता है.
स्पेशल पैनल के साइज़, व्यवहार, और पोज़िशन को बदलने के लिए, 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 ) } }
कोड के बारे में अहम बातें
SpatialPanelएपीआई, सबस्पेस कंपोज़ेबल होते हैं. इसलिए, आपको उन्हेंSubspaceके अंदर कॉल करना होगा. सबस्पेस के बाहर उन्हें कॉल करने पर, गड़बड़ी का मैसेज दिखता है.SpatialPanelका साइज़,SubspaceModifierपरheightऔरwidthकी खास जानकारी का इस्तेमाल करके सेट किया गया है. इन स्पेसिफ़िकेशन को शामिल न करने पर, पैनल का साइज़ उसके कॉन्टेंट के मेज़रमेंट के हिसाब से तय होता है.- उपयोगकर्ता को
movableसबस्पेस मॉडिफ़ायर जोड़कर, पैनल को मूव करने की अनुमति दें. resizableसबस्पेस मॉडिफ़ायर जोड़कर, उपयोगकर्ता को पैनल का साइज़ बदलने की अनुमति दें.- साइज़ और पोज़िशन के बारे में ज़्यादा जानने के लिए, स्पेशल पैनल डिज़ाइन करने से जुड़ी गाइड देखें. कोड लागू करने के बारे में ज़्यादा जानकारी के लिए, हमारा रेफ़रंस दस्तावेज़ देखें.
movable मॉडिफ़ायर के काम करने का तरीका
जब कोई उपयोगकर्ता किसी पैनल को खुद से दूर ले जाता है, तो डिफ़ॉल्ट रूप से movable मॉडिफ़ायर, पैनल को उसी तरह स्केल करता है जिस तरह होम स्पेस में सिस्टम, पैनल का साइज़ बदलता है. सभी चाइल्ड कॉन्टेंट में यह व्यवहार लागू होता है. इसे बंद करने के लिए, shouldScaleWithDistance पैरामीटर को false पर सेट करें.
स्पेशल लेआउट में कई स्पेशल पैनल जोड़ना
SpatialRow, SpatialColumn, SpatialBox, और SpatialSpacer का इस्तेमाल करके, कई स्पेशल पैनल बनाए जा सकते हैं और उन्हें स्पेशल लेआउट में रखा जा सकता है.
यहां दिए गए कोड के उदाहरण में, ऐसा करने का तरीका बताया गया है.
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, सभी सबस्पेस कंपोज़ेबल हैं. इन्हें सबस्पेस में ही रखा जाना चाहिए.- लेआउट को पसंद के मुताबिक बनाने के लिए,
SubspaceModifierका इस्तेमाल करें. - एक लाइन में कई पैनल वाले लेआउट के लिए, हमारा सुझाव है कि आप
SubspaceModifierका इस्तेमाल करके, 825dp का कर्व रेडियस सेट करें. इससे पैनल, उपयोगकर्ता के आस-पास दिखेंगे. ज़्यादा जानकारी के लिए, डिज़ाइन से जुड़े हमारे दिशा-निर्देश देखें.
कस्टम पैनल और लेआउट बनाना
Compose for XR में काम न करने वाले कस्टम पैनल बनाने के लिए, PanelEntity इंस्टेंस और सीन ग्राफ़ के साथ सीधे तौर पर काम किया जा सकता है. इसके लिए, SceneCore एपीआई का इस्तेमाल करें.