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، يجب استدعاؤها داخلSubspace. يؤدي استدعاؤها خارج مساحة فرعية إلى حدوث استثناء. - تم ضبط حجم
SpatialPanelباستخدام مواصفاتheightوwidthعلىSubspaceModifier. يؤدي حذف هذه المواصفات إلى تحديد حجم اللوحة من خلال قياسات محتوياتها. - السماح للمستخدم بنقل لوحة من خلال إضافة معدِّل المساحة الفرعية
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لتخصيص التنسيق. - بالنسبة إلى التنسيقات التي تحتوي على لوحات متعددة في صف واحد، ننصح بضبط نصف قطر
المنحنى على 825 بكسل مستقل الكثافة باستخدام
SubspaceModifierبحيث تحيط اللوحات بالمستخدم. يمكنك الاطّلاع على إرشادات التصميم لمزيد من التفاصيل.
إنشاء لوحات وتنسيقات مخصّصة
لإنشاء لوحات مخصّصة لا تتوافق مع Compose for XR، يمكنك العمل
مباشرةً مع نُسخ PanelEntity والرسم البياني للمشهد باستخدام
واجهات برمجة التطبيقات SceneCore.