پانل‌های فضایی

دستگاه‌های XR واجدشرایط
این راهنمایی به شما کمک می‌کند برای این نوع دستگاه‌های واقعیت گسترده تجربه بسازید.
آشنایی با انواع دستگاه‌های XR →
هدست‌های واقعیت گسترده
عینک واقعیت گسترده سیمی
آشنایی با انواع دستگاه‌های XR →

‫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 بااستفاده از مشخصات 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 برای سفارشی‌سازی چیدمان خود استفاده کنید.
  • برای چیدمان‌هایی که چند پانل در یک ردیف دارند، توصیه می‌کنیم بااستفاده از SubspaceModifier، شعاع انحنا را روی ۸۲۵dp تنظیم کنید تا پانل‌ها کاربر را احاطه کنند. برای جزئیات، راهنمای طراحی ما را ببینید.

ایجاد پانل‌ها و چیدمان‌های سفارشی

برای ایجاد پانل‌های سفارشی که توسط Compose for XR پشتیبانی نمی‌شوند، می‌توانید مستقیماً با نمونه‌های PanelEntity و نمودار صحنه بااستفاده از میاناهای برنامه‌سازی کاربردی SceneCore کار کنید.