Thẻ 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, thành phần Card được thiết kế để nhóm và hiển thị thông tin liên quan trong một đơn vị. Thẻ có khả năng thích ứng cao, hỗ trợ các tổ hợp nội dung chính, tiêu đề và phụ đề (không bắt buộc) cũng như biểu tượng đầu hoặc cuối. Theo mặc định, các thẻ sẽ chiếm toàn bộ chiều rộng tối đa của màn hình kính AI, có thể lấy tiêu điểm và cũng có thể nhấp vào.

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

Cấu trúc và các khe cắm của thẻ

Thẻ Glimmer của Jetpack Compose được tạo từ một số phần tử chuyên biệt, cho phép bạn tuỳ chỉnh nội dung và bố cục của thẻ.

  • Tiêu đề: Phần trên cùng của thẻ, được thiết kế để chứa hình ảnh.

  • Tiêu đề và phụ đề: Các trường văn bản này cung cấp nhãn chính và nhãn phụ cho thẻ.

  • Biểu tượng đầu: Biểu tượng không bắt buộc xuất hiện ở đầu vùng nội dung của thẻ.

  • Biểu tượng ở cuối: Biểu tượng không bắt buộc xuất hiện ở cuối vùng nội dung của thẻ.

  • Hành động: Một vị trí cho phần tử tương tác chính, chẳng hạn như Nút. Điều này cho phép người dùng thực hiện một hành động ngay trên thẻ. Ô này có sẵn trên một lớp nạp chồng riêng của thành phần kết hợp Thẻ.

  • Nội dung chính: Phần nội dung chính của thẻ, nơi bạn đặt Văn bản chính hoặc nội dung khác.

Ví dụ cơ bản: Tạo thẻ cơ bản

Bạn có thể tạo một thẻ rất cơ bản chỉ bằng một đoạn mã nhỏ:

Card { Text("This is a card") }

Ví dụ chi tiết: Hiển thị thẻ phức tạp

Đoạn mã sau đây cho biết cách sử dụng nhiều vị trí cùng nhau để tạo một thẻ. Ví dụ này cũng cho thấy cách ghép nối Card với TitleChip.

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

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

  • Cho biết cách sử dụng nhiều phần tử thẻ, chẳng hạn như header, title, subtitle, leadingIcon và action, để tuỳ chỉnh nội dung và cấu trúc của thẻ.
  • Cho thấy ví dụ về cách đặt TitleChip và sử dụng Spacer.