پیجرهای افقی در Jetpack Compose Glimmer

دستگاه‌های XR قابل اجرا

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

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

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

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

پارامترهای کلیدی و گزینه‌های طرح‌بندی

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

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

توصیه حرکت متن متحرک

در طول انیمیشن‌ها و انتقال‌های Pager Snap روی عینک‌های نمایش، رندر متن پیش‌فرض می‌تواند مصنوعات Pixel-Snap را نشان دهد. تنظیم 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

نکات کلیدی در مورد کد

• State : با استفاده از rememberGlimmerPagerState(pageCount = { 10 }) یک GlimmerPagerState برای مدیریت وضعیت پیجر مقداردهی اولیه می‌کند.
• محتوای جایگاه صفحه : 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