يوفّر التصميم المتعدد الأبعاد مكوّنات وتنسيقات للواقع الممتد. باستخدام مكتبة Material 3 والتنسيقات التكيُّفية ومكتبة XR Compose Material 3، يمكنك إنشاء سلوكيات واجهة مستخدم مكانية في تطبيق Compose.
أضِف مكتبة XR Compose Material 3 إلى تبعيات تطبيقك لاستخدام
مكوّنات Material 3 لـ XR، أو ضَع مكوّنات Material 3 العادية
مباشرةً داخل حاويات Jetpack Compose لـ XR، مثل Orbiter
وSpatialDialog وSpatialPanel.
استخدام مكوّنات Material 3 للواقع الممتد
توفر مكتبة androidx.xr.compose.material3 مكوّنات Material 3 للواقع الممتد (XR) لأنماط واجهة المستخدم المكانية الشائعة، بما في ذلك أشرطة التنقّل وأشرطة التطبيقات العلوية وأشرطة الأدوات العائمة ومربّعات الحوار وعرض على شكل قائمة مع تفاصيل وزر الإيقاف/التفعيل للتبديل بين "المساحة المشتركة" و"المساحة الكاملة". إنّ الدوال المركّبة المكانية Spatial* في هذه المكتبة تجريبية وتتطلّب الموافقة على استخدام @OptIn(ExperimentalMaterial3XrApi::class).
يمكنك وضع علامة في المربّع LocalSpatialCapabilities.current.isSpatialUiEnabled لعرض مكوّنات Material 3 لنظام الواقع الممتد عند تفعيل واجهة المستخدم المكانية، ومكوّنات Material 3 العادية عند عدم تفعيل واجهة المستخدم المكانية. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة التحقّق من
إمكانات الصوت المكاني.
شريط التنقّل
استخدِم SpatialNavigationRail أو SpatialWideNavigationRail لعرض
شريط التنقّل في Material 3 في Orbiter محاذٍ للبداية عند تفعيل
واجهة المستخدم المكانية. لمزيد من المعلومات، يُرجى الاطّلاع على إرشادات التصميم المتعدد الأبعاد.
شريط تنقّل غير مكاني
شريط تنقّل مكاني (متوافق مع الواقع الممتد)
شريط التنقل
استخدِم SpatialNavigationBar أو SpatialShortNavigationBar لعرض
شريط تنقّل Material 3 في Orbiter محاذٍ للأسفل عند تفعيل
واجهة المستخدم المكانية. لمزيد من المعلومات، يُرجى الاطّلاع على إرشادات التصميم المتعدد الأبعاد.
شريط تنقّل غير مكاني
شريط تنقّل مكاني (متوافق مع الواقع الممتد)
مربّعات حوار
استخدِم SpatialBasicAlertDialog لعرض مربّع حوار تنبيه أساسي داخل
SpatialDialog مع ارتفاع مكاني، أو يمكنك تضمين محتوى مربّع حوار Material 3 العادي
مباشرةً في SpatialDialog.
لمزيد من المعلومات، يُرجى الاطّلاع على مربّعات الحوار وإرشادات التصميم التكيُّفي.
حوار غير مكاني
حوار مكاني (مُعدَّل للواقع الممتد)
أشرطة التطبيقات العلوية
استخدِم SpatialTopAppBar أو SpatialTwoRowsTopAppBar لعرض شريط تطبيقات علوي في Material 3 داخل Orbiter محاذٍ للأعلى عند تفعيل واجهة المستخدم المكانية.
لمزيد من المعلومات، يُرجى الاطّلاع على أشرطة التطبيقات العلوية وإرشادات التصميم التكيُّفي.
شريط التطبيق العلوي غير المكاني
شريط التطبيق العلوي المكاني (المتوافق مع الواقع الممتد)
عرض على شكل قائمة مع تفاصيل للواقع الممتد
استخدِم SpatialListDetailPaneScaffold عند تفعيل واجهة المستخدم المكانية لعرض تنسيق عرض على شكل قائمة مع تفاصيل المتكيّف مع Material 3 حيث يتم وضع كل لوحة داخل SpatialPanel الخاصة بها. عندما لا تكون واجهة المستخدم المكانية مفعَّلة، استخدِم
ListDetailPaneScaffold. لمزيد من المعلومات، يُرجى الاطّلاع على تنسيق القائمة والتفاصيل وإرشادات التصميم التكيُّفي.
ListDetailPaneScaffold غير مكاني
ListDetailPaneScaffold مكاني (متوافق مع الواقع الممتد)
دعم تصميم اللوحات في الواقع الممتد
عند تفعيل واجهة المستخدم المكانية، ضَع اللوحة الرئيسية واللوحة الداعمة في حاويات SpatialPanel منفصلة داخل SpatialRow ضمن Subspace. عندما لا تكون واجهة المستخدم المكانية مفعَّلة، استخدِم
SupportingPaneScaffold. لمزيد من المعلومات، يمكنك الاطّلاع على اللوحة الداعمة وإرشادات التصميم التكيُّفي.
SupportingPaneScaffold غير مكاني
SupportingPaneScaffold مكاني (متوافق مع الواقع الممتد)
البدء في التصميم باستخدام مجموعة أدوات Material 3 Design Kit في Figma
تنزيل حزمة تصميم Material 3 للبدء
انظر أيضًا
- تطوير واجهة المستخدم باستخدام Jetpack Compose for XR
- الانتقال من "مساحة الشاشة الرئيسية" إلى "المساحة الكاملة"
- إرشادات تصميم واجهة المستخدم المكانية