Trong Jetpack Compose Glimmer, VerticalList hoạt động tương tự như LazyColumn của Compose 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, đối với Jetpack Compose Glimmer, danh sách dọc được tạo cho các chế độ điều khiển kính hiển thị, trong đó người dùng tương tác bằng bàn di chuột thay vì màn hình cảm ứng. Mặc dù người dùng thiết bị di động có thể nhấn vào bất kỳ toạ độ nào trên màn hình bất cứ lúc nào, nhưng người dùng đeo kính hiển thị chỉ có thể tương tác với mục đang được lấy tiêu điểm.
Hành vi lấy tiêu điểm và các mục con
Danh sách dọc được tối ưu hoá để tự động xử lý chế độ điều hướng dựa trên tiêu điểm. Không giống như danh sách cho thiết bị di động, nơi tiêu điểm và thao tác cuộn thường tách biệt, danh sách dọc đ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 này không thể lấy tiêu điểm, vì vậy, danh sách này sẽ quản lý và yêu cầu tiêu điểm cho các thành phần con để người dùng có một điểm tương tác rõ ràng trong khi di chuyển.
Vì không có nhập bằng cách chạm trực tiếp, hãy đặt tất cả các mục con mà bạn đặt bên trong một danh sách dọc có thể làm tiêu điểm và cung cấp phản hồi trực quan khi các mục có tiêu điểm, 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 tiêu điểm, nhưng họ không thể tương tác với các mục đó. Sử dụng các thành phần tích hợp sẵn như ListItem hoặc Card trong danh sách dọc của bạn bất cứ khi nào có thể, vì các thành phần này đã có thể lấy tiêu điểm và cung cấp phản hồi trực quan cho các trạng thái tiêu điểm.
Ví dụ: Danh sách dọc có nhiều mục
Đoạn mã sau đây cho biết cách sử dụng danh sách dọc với các phương thức DSL item và items để tạo danh sách các mục:
@Composable fun VerticalListSample() { VerticalList { item { ListItem { Text("Header") } } items(count = 10) { index -> ListItem { Text("Item-$index") } } item { ListItem { Text("Footer") } } } }
Ví dụ: Danh sách dọc có một vị trí tiêu đề
Jetpack Compose Glimmer cũng cung cấp một danh sách dọc có chứa một khe cắm tiêu đề. Tiêu đề không thể lấy tiêu điểm (thường là TitleChip) vẫn tĩnh ở trên cùng chính giữa trong khi nội dung danh sách cuộn bên dưới.
Đoạn mã sau đây tạo một danh sách dọc có một khe cắm tiêu đề:
@Composable fun VerticalListWithTitleChipSample() { val ingredientItems = listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon") VerticalList(title = { TitleChip { Text("Ingredients") } }) { items(ingredientItems) { text -> ListItem { Text(text) } } } }
Sử dụng trạng thái danh sách cho các thao tác trên danh sách theo chương trình
Sử dụng ListState để 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.
Bạn có thể nâng trạng thái này lên bằng cách sử dụng rememberListState để cuộn theo chương trình bằng scrollToItem và animateScrollToItem.