اللوحات المكانية

أجهزة XR المشمولة
تساعدك هذه الإرشادات في إنشاء تجارب لهذه الأنواع من أجهزة XR.
مزيد من المعلومات حول أنواع أجهزة XR →
سماعات الرأس بنظام الواقع الممتد
نظارات سلكية بنظام الواقع الممتد
مزيد من المعلومات حول أنواع أجهزة XR →

‫SpatialPanel هي دالة مركّبة في مساحة فرعية تتيح لك عرض محتوى تطبيقك، على سبيل المثال، يمكنك عرض تشغيل الفيديو أو الصور الثابتة أو أي محتوى آخر في لوحة مكانية.

الشكل 1: مثال على لوحة واجهة مستخدم مكانية

يمكنك استخدام 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.

الشكل 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 هي دوال مركّبة في مساحة فرعية ويجب وضعها داخل مساحة فرعية.
  • استخدِم SubspaceModifier لتخصيص التنسيق.
  • بالنسبة إلى التنسيقات التي تحتوي على لوحات متعددة في صف واحد، ننصح بضبط نصف قطر المنحنى على 825 بكسل مستقل الكثافة باستخدام SubspaceModifier بحيث تحيط اللوحات بالمستخدم. يمكنك الاطّلاع على إرشادات التصميم لمزيد من التفاصيل.

إنشاء لوحات وتنسيقات مخصّصة

لإنشاء لوحات مخصّصة لا تتوافق مع Compose for XR، يمكنك العمل مباشرةً مع نُسخ PanelEntity والرسم البياني للمشهد باستخدام واجهات برمجة التطبيقات SceneCore.