Ngăn xếp dọc 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 →
Kính hiển thị
Tìm hiểu về các loại thiết bị XR →

Trong Jetpack Compose Glimmer, VerticalStack là một bố cục có thể cuộn theo chiều dọc, tải từng phần, sắp xếp các mục theo trình tự ba chiều, chồng chéo trực quan. Mục chính được hiển thị nổi bật ở nền trước, trong khi các mục tiếp theo được đặt ở phía sau.

Hình 1. Ví dụ về một số kiểu ngăn xếp trong Jetpack Compose Glimmer.

Hành vi cuộn và định vị

Vì các ngăn xếp giữ các mục được sắp xếp trong một bố cục nhỏ gọn, chồng chéo, nên chúng có một số hành vi khác với các loại thành phần tuần tự khác, chẳng hạn như danh sách:

  • Khi người dùng cuộn theo chiều dọc, mục đang hoạt động ở nền trước sẽ chuyển ra khỏi khung hiển thị, cho phép mục ngay bên dưới trượt vào vị trí nổi bật ở nền trước.
  • Các mục luôn có hiệu ứng động chụp nhanh bằng cách sử dụng ảnh động lò xo chuyên dụng vào vị trí nền trước sau khi cử chỉ của người dùng kết thúc.
  • Các mục được đặt dọc theo trục z, với các mục ở xa hơn trong danh sách được đặt phía sau mục chính.

Quản lý tiêu điểm

VerticalStack sử dụng một hệ thống tiêu điểm chuyên biệt để đảm bảo rằng mục trên nền trước hiện tại luôn là mục tiêu chính cho lượt tương tác của người dùng:

  • Tiêu điểm ban đầu và tiêu điểm khi quay lại: Tiêu điểm ban đầu và tiêu điểm khi quay lại sẽ chuyển đến mục trên cùng hiện tại của ngăn xếp.
  • Thông báo tự động lấy nét: Khi các mục chuyển đổi, ngăn xếp sẽ yêu cầu lấy tiêu điểm cho mục trên cùng.
  • Theo dõi tiêu điểm: Mỗi mục sử dụng onFocusChanged để thông báo cho StackState về trạng thái tiêu điểm riêng của mục đó.

Ví dụ: Tạo một ngăn xếp dọc

Đoạn mã sau đây tạo một ngăn xếp dọc có nhiều mục:

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}

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

  • Đặt textMotion cho LocalTextStyle của văn bản thành Animated. Điều này giúp văn bản hiển thị mượt mà trong quá trình chuyển đổi tỷ lệ hoặc hoạt ảnh bố cục để ngăn chặn hiện tượng pixel bị lệch.
  • Cung cấp một kích thước cụ thể của 364.dp cho chiều cao của ngăn xếp dọc. Luôn cung cấp chiều cao cụ thể, sử dụng đối tượng sửa đổi chiều cao hoặc áp dụng đối tượng sửa đổi fillMaxSize để xác định vùng hiển thị cho hiệu ứng chuyển đổi thẻ.
  • Không giống như các thành phần khác lấy trực tiếp một tham số hình dạng, VerticalStack quản lý ranh giới trực quan của các mục bằng cách sử dụng đối tượng sửa đổi itemDecoration. Ví dụ này truyền cùng một hình dạng cho itemDecoration của mục ban đầu như tất cả các mục con để duy trì hiệu ứng hình ảnh và thao tác cắt nhất quán. Ví dụ này sử dụng CardDefaults.shape mặc định.