صفحه‌بندی‌های افقی در Jetpack Compose Glimmer

دستگاه‌های XR قابل‌اعمال

این راهنمایی به شما کمک می‌کند برای این نوع دستگاه‌های واقعیت گسترده تجربه بسازید.

آشنایی با انواع دستگاه‌های XR →

آشنایی با انواع دستگاه‌های XR →

در Jetpack Compose Glimmer، GlimmerHorizontalPager چیدمانی با قابلیت پیمایش افقی است که به‌صورت تنبل‌وار ترکیب شده است و صفحه‌هایش را به‌ترتیب می‌چیند. این مورد شبیه به HorizontalPager استاندارد موجود در «پایه» «نوشتن» است، اما برای عینک‌های نمایشگر با عملکردهای «درخشش» و مقادیر پیش‌فرض سفارشی‌سازی شده است.

به‌طور پیش‌فرض، فقط یک صفحه در هر زمان به‌صورت برجسته نمایش داده می‌شود. برای ارائه تجربه‌ای صیقلی، صفحه‌گرد از پویانمایی‌های چسبنده استفاده می‌کند تا مطمئن شود صفحه همیشه دقیقاً در مرزهای درگاه دید پس‌از پایان اشاره پیمایش کاربر قرار می‌گیرد.

پارامترهای کلیدی و گزینه‌های چیدمان

GlimmerHorizontalPager پارامترهای قابل‌سفارشی‌سازی برای کنترل فاصله، تراز چیدمان، و بارگذاری تنبل ارائه می‌دهد. برخی‌از این پارامترها عبارت‌اند از:

برای اطلاعات درباره همه پارامترهای دردسترس، اسناد مرجع کامل را ببینید.

توصیه حرکت نوشتار پویانمایی‌شده

درطول پویانمایی‌های چسباندن صفحه و گذارها در عینک‌های نمایشگر، پردازش نوشتار پیش‌فرض می‌تواند آرتیفکت‌های چسباندن پیکسل را نشان دهد. تنظیم TextMotion.Animated باعث می‌شود که درطول پویانمایی‌های چیدمان، رندرینگ روان باشد:

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

مثال: صفحه‌بندی افقی

کد زیر نشان می‌دهد چگونه یک صفحه‌گرد افقی پایه با ‫۱۰ صفحه ایجاد کنید و «کارت» را در هر صفحه قرار دهید:

// 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 را به‌طور صریح فعال می‌کند.
• نشانگر صفحه خودکار: برخلاف صفحه‌بندهای استاندارد «نوشتن» که به عنصر نشانگر خارجی نیاز دارند، 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