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ẽ lấp đầy 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à hiệu ứ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ẻ.

Hành động

Một vị trí cho phần tử tương tác chính, chẳng hạn như Button.

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 hiển thị.
  • 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 các góc 24.dp
  • 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 tạo một thẻ cơ bản:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

Ví dụ: Thẻ phức tạp có nhiều khe cắm

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

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, leadingIcon và action, để 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 tiêu chuẩn với một thao tác vì chỉ thẻ (hoặc thao tác nội bộ của thẻ) cần có thể lấy tiêu điểm. Nếu bạn cần làm cho toàn bộ bề mặt thẻ có tính tương tác, hãy sử dụng phương thức nạp chồng Card với onClick.
  • Thẻ này sử dụng một khe hành động, nên bề mặt thẻ không lấy được tiêu điểm và tiêu điểm sẽ được chuyển hướng đến nút hành động.