الحِزم العمودية في Jetpack Compose Glimmer

أجهزة XR المشمولة

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

مزيد من المعلومات حول أنواع أجهزة XR →

مزيد من المعلومات حول أنواع أجهزة XR →

في Jetpack Compose Glimmer، VerticalStack هو تصميم قابل للتمرير عموديًا ويتم تحميله عند الحاجة، ويرتّب العناصر في تسلسل ثلاثي الأبعاد يتداخل بصريًا. يتم عرض العنصر الأساسي بشكل بارز في المقدمة، بينما يتم وضع العناصر اللاحقة خلفه.

سلوكيات التمرير وتحديد الموضع

بما أنّ الحِزم تحافظ على ترتيب العناصر في تصميم مضغوط ومتداخل، فإنّها تتضمّن بعض السلوكيات المختلفة عن الأنواع الأخرى من المكوّنات المتسلسلة، مثل القوائم:

• عندما يتنقّل المستخدم عموديًا، ينتقل العنصر النشط في المقدّمة خارج نطاق العرض، ما يسمح للعنصر الذي يقع أسفله مباشرةً بالانزلاق إلى موضع المقدّمة البارز.
• يتم دائمًا تحريك العناصر بشكل سريع باستخدام حركة نابضية متخصّصة إلى موضع المقدّمة بعد انتهاء إيماءة المستخدم.
• يتم وضع العناصر على طول المحور z، مع وضع العناصر الأبعد في القائمة خلف العنصر الأساسي.

إدارة التركيز

يستخدم VerticalStack نظام تركيز متخصصًا لضمان أنّ العنصر الحالي في المقدّمة هو دائمًا الهدف الأساسي لتفاعل المستخدم:

• التركيز الأوّلي وإعادة التركيز: ينتقل التركيز الأوّلي وإعادة التركيز إلى العنصر الحالي في أعلى الحزمة.
• إشعار التركيز التلقائي: عند انتقال العناصر، يطلب الحزمة التركيز على العنصر العلوي.
• تتبُّع التركيز: يستخدم كل عنصر onFocusChanged لإعلام StackState بحالة التركيز الفردية.

مثال: إنشاء حزمة عمودية

تنشئ التعليمة البرمجية التالية حزمة عمودية تحتوي على عدة عناصر:

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}
StackSamples.kt

النقاط الرئيسية حول الرمز

• تضبط هذه السمة textMotion LocalTextStyle للنص على Animated. يساعد ذلك في عرض النص بسلاسة أثناء الرسوم المتحركة الخاصة بالتصميم أو عمليات الانتقال المتعلقة بتغيير الحجم، ما يمنع ظهور تشوّهات ناتجة عن محاذاة البكسل.
• توفّر هذه السمة حجمًا محدّدًا لـ 364.dp من أجل ارتفاع الحزمة العمودية. يجب دائمًا توفير ارتفاع محدّد أو استخدام أداة تعديل الارتفاع أو تطبيق أداة التعديل fillMaxSize لتحديد المساحة المرئية للانتقالات بين البطاقات.
• على عكس المكوّنات الأخرى التي تأخذ مَعلمة الشكل مباشرةً، تدير VerticalStack الحدود المرئية لعناصرها باستخدام المعدِّل itemDecoration. يستخدم هذا المثال الشكل نفسه لكل من itemDecoration الخاص بالعنصر الأوّلي وجميع العناصر الفرعية للحفاظ على اتساق عمليات القص والتأثيرات المرئية. يستخدم هذا المثال CardDefaults.shape التلقائي.