Mục trong 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 →
Kính hiển thị
Tìm hiểu về các loại thiết bị XR →

Trong Jetpack Compose Glimmer, ListItem là thành phần tiêu chuẩn để hiển thị một hàng nội dung. Các mục trong danh sách được thiết kế cho hoạt động tương tác dựa trên tiêu điểm của kính có màn hình, vì vậy, chúng cung cấp phản hồi trực quan tích hợp khi lấy tiêu điểm.

Thành phần này có 2 phương thức nạp chồng: một phương thức có tham số onClick cho các mục kích hoạt hành động và một phiên bản chỉ có thể lấy tiêu điểm cho nội dung thông tin không yêu cầu hành động nhấp.

Hình 1. Ví dụ về 2 danh sách có các kiểu mục trong danh sách khác nhau trong Jetpack Compose Glimmer.

Cách sử dụng trong danh sách

Các mục trong danh sách là lựa chọn chính cho các hàng trong một danh sách, tuy nhiên, danh sách cũng có thể lưu trữ các thành phần khác, chẳng hạn như Card hoặc TitleChip, để nhấn mạnh bằng hình ảnh theo nhiều cách.

Các mục trong danh sách sử dụng khe headlineContent cho văn bản chính để căn chỉnh với các thành phần Card và TitleChip được dùng cho các mục khác.

Ví dụ: Mục danh sách cơ bản

Đoạn mã sau đây tạo một mục cơ bản trong danh sách:

@Composable
fun ListItemSample() {
    ListItem { Text("This is a list item") }
}

Ví dụ: Mục danh sách có nhãn và biểu tượng hỗ trợ

Đoạn mã sau đây tạo một mục trong danh sách có nhãn hỗ trợ và cả biểu tượng đầu và cuối:

@Composable
fun ListItemWithIconsSample() {
    ListItem(
        leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
        trailingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") }
    ) {
        Text("This is a list item with icons")
    }
}