أدوات عرض الصفحات الأفقية في Glimmer من Jetpack Compose

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

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

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

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

في Jetpack Compose Glimmer، ‏GlimmerHorizontalPager هو تنسيق قابل للتمرير أفقيًا يتم إنشاؤه بشكل مؤجل ويرتّب صفحاته بالتسلسل. وهو مشابه لعنصر HorizontalPager العادي المتوفّر في Compose Foundation، ولكنّه مصمّم خصيصًا لنظارات بشاشة عرض مع سلوكيات Glimmer والقيم التلقائية.

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

المَعلمات الرئيسية وخيارات التنسيق

يوفّر GlimmerHorizontalPager مَعلمات قابلة للتخصيص للتحكّم في التباعد ومحاذاة التنسيق والتحميل المؤجل. في ما يلي بعض هذه المَعلمات:

يمكنك الاطّلاع على مستندات المرجع الكاملة reference documentation للحصول على معلومات حول جميع المَعلمات المتاحة parameters.

اقتراح بشأن حركة النص المتحرّك

أثناء الرسوم المتحركة السريعة وعمليات الانتقال في عنصر الترحيل السريع على نظارات بشاشة عرض، يمكن أن يؤدي عرض النص التلقائي إلى ظهور عناصر غير متناسقة على مستوى البكسل. يضمن ضبط TextMotion.Animated عرضًا سلسًا خلال الرسوم المتحركة للتنسيق:

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)
GlimmerHorizontalPagerSample.kt

مثال: عنصر الترحيل السريع الأفقي

يوضّح الرمز البرمجي التالي كيفية إنشاء عنصر ترحيل سريع أفقي أساسي يتضمّن 10 صفحات، مع وضع `Card` داخل كل صفحة:

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}
GlimmerHorizontalPagerSample.kt

نقاط أساسية حول الرمز البرمجي

• الحالة: يتم تهيئة GlimmerPagerState باستخدام rememberGlimmerPagerState(pageCount = { 10 }) لإدارة حالة عنصر الترحيل السريع.
• محتوى موضع الصفحة: يتلقّى فهرس الصفحة page داخل GlimmerPagerScope تعبير lambda لعرض كل بطاقة.
• نمط نص الرسوم المتحركة السلسة: يتم نسخ LocalTextStyle.current و تفعيل TextMotion.Animated بشكل صريح.
• مؤشر التنقّل بين الصفحات التلقائي: على عكس عناصر التنقّل بين الصفحات العادية في Compose التي تتطلّب مكوّن مؤشر خارجي، GlimmerHorizontalPager تلقائيًا يضمّن مؤشر صفحة بنمط النقاط بشكل تلقائي.

مؤشرات الصفحات

يعرض GlimmerHorizontalPager تلقائيًا مؤشر صفحة يستند إلى النقاط باستخدام GlimmerHorizontalPagerDefaults.PageIndicator. ويتكيّف المؤشر تلقائيًا مع نظام الألوان:

• تستخدم النقطة النشطة لون المحتوى الذي يتم تحديده من أقرب محيطة surface.

يمكنك تمرير PageIndicator مخصّص لتحديد ألوان صريحة، أو استبدال النقطة بتنسيقك المخصّص:

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)
GlimmerHorizontalPagerSample.kt