أدوات عرض الصفحات الأفقية في 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 صفحات، مع وضع بطاقة داخل كل صفحة:

// 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 دالة لامدا لعرض كل بطاقة.
• نمط نص الرسوم المتحركة السلسة: يتم نسخ 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