قوائم في Glimmer من Jetpack Compose

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

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

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

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

في Jetpack Compose Glimmer، تعمل السمة VerticalList بشكل مشابه للسمة LazyColumn في Compose، حيث يتم إنشاء العناصر المرئية فقط وتنسيقها للحفاظ على الأداء العالي. ومع ذلك، بالنسبة إلى Jetpack Compose Glimmer، يتم إنشاء القوائم العمودية لعناصر التحكّم في نظارات العرض، حيث يتفاعل المستخدم باستخدام لوحة لمس بدلاً من شاشة لمس. بينما يمكن لمستخدم الهاتف النقر على أي إحداثية على الشاشة في أي وقت، لا يمكن لمستخدم نظارات العرض التفاعل إلا مع العنصر الذي يكون التركيز عليه.

سلوك التركيز والعناصر الفرعية

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

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

مثال: قائمة عمودية تتضمّن عناصر متعددة

تعرض التعليمة البرمجية التالية كيفية استخدام قائمة عمودية مع طريقتَي DSL `item` و`items` لإنشاء قائمة بالعناصر:

@Composable
fun VerticalListSample() {
    VerticalList {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
ListSamples.kt

مثال: قائمة عمودية تتضمّن خانة عنوان

يوفّر Jetpack Compose Glimmer أيضًا حمولة زائدة من القائمة العمودية التي تحتوي على خانة عنوان. يبقى العنوان غير القابل للتركيز (عادةً TitleChip) ثابتًا في أعلى الوسط أثناء تمرير محتوى القائمة أسفله.

تنشئ التعليمة البرمجية التالية قائمة عمودية تتضمّن خانة عنوان:

@Composable
fun VerticalListWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    VerticalList(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
ListSamples.kt

استخدام حالة القائمة لإجراء عمليات برمجية على القائمة

استخدِم ListState للتحكّم في الجوانب المختلفة لحالة القائمة ومراقبتها، مثل موضع التمرير باستخدام السمتَين firstVisibleItemIndex و firstVisibleItemScrollOffset.

يمكنك رفع هذه الحالة باستخدام rememberListState للتمرير بطريقة برمجية باستخدام scrollToItem وanimateScrollToItem.