Danh sách trong Jetpack Compose Glimmer

Các thiết bị XR áp dụng
Hướng dẫn này giúp bạn tạo trải nghiệm cho các loại thiết bị XR này.
Tìm hiểu về các loại thiết bị thực tế mở rộng (XR) →
Kính AI
Tìm hiểu về các loại thiết bị thực tế mở rộng (XR) →

Trong Jetpack Compose Glimmer, danh sách là các thành phần giao diện người dùng có thể cuộn theo chiều dọc, chỉ kết xuất hiệu quả các mục hiển thị, được thiết kế để cung cấp các hành vi cụ thể và khả năng tương thích đầu vào cho các ứng dụng kính AI. Jetpack Compose Glimmer thực hiện việc này bằng cách sử dụng các thành phần VerticalList và ListItem.

Hình 1. Ví dụ về một số kiểu danh sách trong Jetpack Compose Glimmer.

VerticalList là thành phần của Jetpack Compose Glimmer để hiển thị nội dung dọc có thể cuộn. API này cung cấp chức năng API giống như LazyColumn nhưng có các hành vi được tối ưu hoá đặc biệt cho Jetpack Compose Glimmer và kính AI có màn hình.

Danh sách Glimmer của Jetpack Compose có một số điều kiện ràng buộc riêng biệt:

  • Danh sách chỉ nên hiển thị tối đa 3 mục trong một khung hiển thị.
  • Khi một danh sách chứa nhiều mục hơn số lượng có thể vừa với một khung hiển thị, một lớp phủ màu đen sẽ được dùng gần ranh giới của danh sách.

Ví dụ: Hiển thị danh sách dọc có 3 mục

Đoạn mã sau đây cho biết cách sử dụng các thành phần VerticalList và ListItem để tạo danh sách gồm 3 mục:

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

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

  • Danh sách này hiển thị 3 mục được tạo linh động, mỗi mục là một ListItem.
  • Bạn có thể tuỳ chỉnh từng ListItem và thêm biểu tượng vào đó.