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 và tải từng phần, sắp xếp các mục theo một trình tự trực quan, chồng chéo và ba chiều. Mặt hàng chính được hiển thị nổi bật ở nền trước, trong khi các mặt hàng 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 ảnh động 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 lấy 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 tiêu điểm: 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 với một số mục thẻ:

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}