Danh sách 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, GlimmerLazyColumn hoạt động tương tự như Compose LazyColumn bằng cách chỉ kết hợp và bố trí các mục hiển thị để duy trì hiệu suất cao. Tuy nhiên, các cột lazy của Glimmer được xây dựng cho các chế độ điều khiển kính hiển thị, trong đó người dùng tương tác bằng cách sử dụng bàn di chuột thay vì màn hình cảm ứng. Mặc dù người dùng trên thiết bị di động có thể nhấn vào bất kỳ toạ độ nào trên màn hình vào bất kỳ lúc nào, nhưng người dùng có kính hiển thị chỉ có thể tương tác với mục đang được lấy nét.

Hành vi lấy nét và các mục con

Các cột lazy của Glimmer sẽ tự động xử lý tính năng điều hướng dựa trên tiêu điểm. Không giống như danh sách dành cho thiết bị di động, nơi tiêu điểm và thao tác cuộn thường tách biệt, cột lazy của Glimmer sẽ điều phối hai thao tác này bằng cách di chuyển tiêu điểm qua các mục con khi người dùng cuộn bằng bàn di chuột. Bản thân danh sách không thể lấy nét, vì vậy, danh sách này sẽ quản lý và yêu cầu lấy nét cho các mục con để người dùng có điểm tương tác rõ ràng trong khi cuộn.

Vì không có thao tác chạm trực tiếp, hãy làm cho tất cả các mục con bên trong cột lazy của Glimmer có thể lấy nét. Khi các mục được lấy nét, hãy cung cấp phản hồi trực quan, chẳng hạn như đường viền hoặc điểm nổi bật đang hoạt động. Mặc dù người dùng vẫn có thể cuộn qua các mục không lấy nét được, nhưng họ không thể tương tác với các mục đó. Hãy sử dụng các thành phần tích hợp sẵn như ListItem hoặc Card bất cứ khi nào có thể, vì các thành phần này đã có thể lấy nét và cung cấp phản hồi trực quan cho các trạng thái lấy nét.

Ví dụ: Các cột lazy của Glimmer có nhiều mục

Mã sau đây cho biết cách sử dụng cột lazy của Glimmer với các phương thức DSL mục và các mục để tạo danh sách các mục:

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
GlimmerLazyColumnSamples.kt

Ví dụ: Các cột lazy của Glimmer có một vị trí tiêu đề

Jetpack Compose Glimmer cũng cung cấp một phương thức nạp chồng của GlimmerLazyColumn chứa một vị trí tiêu đề. Tiêu đề không lấy nét được (thường là TitleChip, vẫn ở vị trí tĩnh ở giữa trên cùng trong khi nội dung danh sách cuộn bên dưới.

Mã sau đây sẽ tạo một cột lazy của Glimmer có một vị trí tiêu đề:

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
GlimmerLazyColumnSamples.kt

Sử dụng trạng thái danh sách lazy của Glimmer cho các thao tác danh sách theo phương thức lập trình

Để kiểm soát và quan sát các khía cạnh khác nhau của trạng thái danh sách, chẳng hạn như vị trí cuộn bằng cách sử dụng các thuộc tính firstVisibleItemIndex và firstVisibleItemScrollOffset, hãy sử dụng GlimmerLazyListState.

Bạn có thể nâng trạng thái này bằng cách sử dụng rememberGlimmerLazyListState để cuộn theo phương thức lập trình bằng cách sử dụng scrollToItem và animateScrollToItem.