في Jetpack Compose Glimmer، يعمل GlimmerLazyColumn بشكل مشابه لـ LazyColumn في Compose، وذلك من خلال إنشاء وتنسيق العناصر المرئية فقط للحفاظ على الأداء العالي. ومع ذلك، تم تصميم أعمدة Glimmer الكسولة لعناصر التحكّم في النظارات الذكية، حيث يتفاعل المستخدم من خلال لوحة لمس بدلاً من شاشة تعمل باللمس. في حين يمكن لمستخدم الجهاز الجوّال النقر على أي إحداثية على الشاشة في أي وقت، لا يمكن لمستخدم نظارات العرض التفاعلية التفاعل إلا مع العنصر الذي يتم التركيز عليه.
سلوك التركيز والعناصر الفرعية
تتعامل أعمدة Glimmer الكسولة تلقائيًا مع التنقّل المستند إلى التركيز. على عكس القوائم على الأجهزة الجوّالة التي غالبًا ما يكون فيها التركيز والتمرير منفصلَين، ينسّق العمود الكسول في Glimmer بين التركيز والتمرير من خلال نقل التركيز بين العناصر الفرعية أثناء تمرير المستخدم على لوحة اللمس. ولا يمكن التركيز على القائمة نفسها، لذا فهي تدير التركيز وتطلبه للعناصر التابعة لها حتى يتمكّن المستخدم من التفاعل مع نقطة واضحة أثناء التمرير.
بما أنّه لا يمكن إدخال البيانات مباشرةً باللمس، يجب أن تكون جميع العناصر الفرعية داخل عمود Glimmer
الكسول قابلة للتركيز. عندما تكون العناصر في وضع التركيز، يجب أيضًا تقديم استجابة مرئية، مثل حدود نشطة أو تمييز. مع أنّه سيظل بإمكان المستخدمين الانتقال إلى ما بعد العناصر غير القابلة للتركيز، لن يتمكّنوا من التفاعل معها. استخدِم المكوّنات المضمّنة، مثل ListItem أو Card، كلما أمكن ذلك، لأنّ هذه المكوّنات قابلة للتركيز وتوفّر ملاحظات مرئية لحالات التركيز.
مثال: أعمدة Glimmer الكسولة التي تحتوي على عناصر متعددة
يوضّح الرمز البرمجي التالي كيفية استخدام عمود Glimmer كسول مع طريقتَي DSL للعنصر والعناصر لإنشاء قائمة بالعناصر:
@Composable fun GlimmerLazyColumnSample() { GlimmerLazyColumn { item { ListItem { Text("Header") } } items(count = 10) { index -> ListItem { Text("Item-$index") } } item { ListItem { Text("Footer") } } } }
مثال: أعمدة Glimmer الكسولة مع خانة عنوان
يوفّر Jetpack Compose Glimmer أيضًا حمولة زائدة من GlimmerLazyColumn تحتوي على خانة عنوان. يبقى العنوان غير القابل للتركيز، وهو عادةً TitleChip، ثابتًا في أعلى منتصف الشاشة بينما يتنقل محتوى القائمة أسفله.
ينشئ الرمز البرمجي التالي عمودًا كسولاً في Glimmer مع خانة عنوان:
@Composable fun GlimmerLazyColumnWithTitleChipSample() { val ingredientItems = listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon") GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) { items(ingredientItems) { text -> ListItem { Text(text) } } } }
استخدام حالة القائمة الكسولة في Glimmer لإجراء عمليات القوائم آليًا
للتحكّم في الجوانب المختلفة لحالة القائمة ومراقبتها، مثل موضع الانتقال باستخدام السمتَين firstVisibleItemIndex وfirstVisibleItemScrollOffset، استخدِم GlimmerLazyListState.
يمكنك نقل هذه الحالة إلى مستوى أعلى باستخدام rememberGlimmerLazyListState للتمرير آليًا باستخدام scrollToItem وanimateScrollToItem.