Trình phân trang ngang trong Jetpack Compose Glimmer

Các thiết bị XR được hỗ trợ

Hướng dẫn này giúp bạn xây dựng các trải nghiệm cho những loại thiết bị XR sau.

Tìm hiểu về các loại thiết bị XR →

Tìm hiểu về các loại thiết bị XR →

Trong Jetpack Compose Glimmer, GlimmerHorizontalPager là một bố cục có thể cuộn theo chiều ngang, được tạo thành phần kết hợp một cách linh hoạt và sắp xếp các trang theo trình tự. Thành phần này tương tự như HorizontalPager tiêu chuẩn có trong Compose Foundation, nhưng được điều chỉnh cho phù hợp với kính có màn hình có các hành vi Glimmer và giá trị mặc định.

Theo mặc định, mỗi lần chỉ có một trang được hiển thị nổi bật. Để mang lại trải nghiệm mượt mà, bộ phân trang sử dụng ảnh động chụp nhanh để đảm bảo rằng một trang luôn nằm chính xác trong ranh giới khung hiển thị sau khi cử chỉ cuộn của người dùng kết thúc.

Các tham số chính và lựa chọn bố cục

GlimmerHorizontalPager cung cấp các tham số có thể tuỳ chỉnh để kiểm soát khoảng cách, căn chỉnh bố cục và tải từng phần. Sau đây là một số tham số:

Hãy xem tài liệu tham khảo đầy đủ để biết thông tin về tất cả các tham số có sẵn.

Đề xuất về chuyển động cho văn bản có hiệu ứng động

Trong quá trình chuyển đổi và ảnh động chụp nhanh trang trên kính có màn hình, quá trình kết xuất văn bản mặc định có thể xuất hiện các hiện tượng chụp ảnh điểm ảnh. Việc thiết lập TextMotion.Animated sẽ đảm bảo quá trình kết xuất diễn ra suôn sẻ trong suốt ảnh động bố cục:

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

Ví dụ: Chế độ phân trang ngang

Đoạn mã sau đây minh hoạ cách tạo một trình phân trang ngang cơ bản có 10 trang, đặt một Thẻ bên trong mỗi trang:

// 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

Các điểm chính về mã

• State: Khởi chạy một GlimmerPagerState bằng rememberGlimmerPagerState(pageCount = { 10 }) để quản lý trạng thái của trình phân trang.
• Nội dung của ô trang: Nhận chỉ mục trang page bên trong hàm lambda GlimmerPagerScope để kết xuất từng thẻ.
• Kiểu văn bản có ảnh động mượt mà: Sao chép LocalTextStyle.current và bật rõ ràng TextMotion.Animated.
• Chỉ báo trang tự động: Không giống như các trình phân trang Compose tiêu chuẩn yêu cầu một thành phần chỉ báo bên ngoài, GlimmerHorizontalPager tự động nhúng chỉ báo trang kiểu dấu chấm theo mặc định.

Chỉ báo trang

Theo mặc định, GlimmerHorizontalPager hiển thị một chỉ báo trang dựa trên dấu chấm bằng cách sử dụng GlimmerHorizontalPagerDefaults.PageIndicator. Chỉ báo sẽ tự động điều chỉnh bảng phối màu:

• Dấu chấm đang hoạt động sử dụng màu nội dung được phân giải từ surface xung quanh gần nhất.

Bạn có thể truyền một PageIndicator tuỳ chỉnh để chỉ định màu sắc rõ ràng hoặc thay thế dấu chấm bằng bố cục tuỳ chỉnh của riêng bạn:

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