Thẻ 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, thành phần Card đóng vai trò là vùng chứa chính cho nội dung liên quan, tạo ra ranh giới trực quan rõ ràng cho các đơn vị thông tin dễ tiếp thu. Thẻ có khả năng thích ứng cao, hỗ trợ các tổ hợp nội dung chính, tiêu đề, phụ đề (không bắt buộc) và biểu tượng đầu hoặc cuối. Theo mặc định, các thẻ sẽ có chiều rộng tối đa có thể, có thể lấy tiêu điểm và bạn cũng có thể làm cho các thẻ này có thể nhấp vào. Thẻ hỗ trợ bố cục dọc, trong đó hình ảnh tiêu đề nằm ở trên cùng, theo sau là tiêu đề, phụ đề và nội dung.

Thẻ được xây dựng trên hệ thống bề mặt Glimmer của Jetpack Compose, vì vậy, thẻ sẽ kế thừa các thuộc tính vật lý như hiệu ứng chiều sâu, đường viền nhất quán và tính năng cắt.

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

Cấu trúc và vị trí

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ẻ.

Khe Mô tả

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ẻ. Tiêu đề nằm phía trên phụ đề.

Biểu tượng hàng đầu

Một biểu tượng không bắt buộc (thường là Icon) xuất hiện ở đầu vùng nội dung của thẻ.

Biểu tượng ở cuối

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

Nội dung chính

Phần nội dung chính của thẻ cho Text hoặc nội dung chính.

Thẻ mặc định

Các chế độ mặc định sau đây áp dụng cho thẻ:

  • Chiều rộng: Các thẻ sẽ chiếm chiều rộng tối đa có thể của màn hình để tối ưu hoá khả năng đọc trên kính có màn hình.
  • Chiều cao tối thiểu: 80.dp
  • Khoảng cách dọc của văn bản: 3.dp
  • Hình dạng tiêu đề: Sử dụng RoundedCornerShape với 24.dp góc
  • Khoảng đệm nội dung: Mặc định là GlimmerTheme.componentSpacingValues.medium. Điều này ảnh hưởng đến khoảng đệm ngoài cùng xung quanh hình ảnh tiêu đề và vùng chứa nội dung.
  • Hình dạng: Mặc định là GlimmerTheme.shapes.medium.

  • Kết xuất văn bản: Sử dụng các giá trị mặc định từ GlimmerTheme.typography cho các vị trí sau:

Ví dụ: Thẻ cơ bản

Đoạn mã sau đây cho thấy mã tối thiểu cần thiết để tạo một thẻ:

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

Ví dụ: Thẻ có nhiều vị trí

Đoạn mã sau đây cho biết cách sử dụng nhiều khe cắm cùng nhau để tạo một thẻ:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

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ư title, subtitle và leadingIcon, để tuỳ chỉnh nội dung và cấu trúc của thẻ.
  • Sử dụng phương thức nạp chồng Card với onClick để làm cho toàn bộ bề mặt thẻ có tính tương tác.

Thẻ hành động

Nếu bạn muốn thêm một nút hành động vào thẻ, hãy dùng ActionCard. Thẻ hành động có các phần tử giống như thẻ tiêu chuẩn và cũng bao gồm một tham số action bổ sung xác định nút dưới cùng.

Hình 2. Ví dụ về một ActionCard trong Jetpack Compose Glimmer.

Ví dụ: Thẻ hành động cơ bản

Mã này cho biết cách tạo một ActionCard:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

Ví dụ: Thẻ hành động có biểu tượng

Đoạn mã này cho biết cách tạo một ActionCard phức tạp hơn bằng các biểu tượng:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}