Thẻ

Thành phần kết hợp Card đóng vai trò là vùng chứa Material Design cho giao diện người dùng của bạn. Thẻ (card) thường trình bày một phần nội dung mạch lạc duy nhất. Sau đây là một số ví dụ về trường hợp bạn có thể sử dụng thẻ:

  • Sản phẩm trong ứng dụng mua sắm.
  • Câu chuyện thời sự trong một ứng dụng tin tức.
  • Tin nhắn trong ứng dụng liên lạc.

Thẻ tập trung vào việc trình bày một phần nội dung duy nhất giúp phân biệt Card với các vùng chứa khác. Ví dụ: Scaffold cung cấp cấu trúc chung cho toàn bộ màn hình. Nói chung thì Thẻ là một thành phần giao diện người dùng nhỏ hơn bên trong bố cục lớn hơn, trong khi thành phần bố cục như Column hoặc Row cung cấp API đơn giản và tổng quát hơn.

Một thẻ nâng cao có chứa văn bản và biểu tượng.
Hình 1. Ví dụ về thẻ chứa văn bản và biểu tượng.

Cách triển khai cơ bản

Card có hành vi giống như các vùng chứa khác trong Compose. Bạn sẽ khai báo nội dung bằng cách gọi các thành phần kết hợp khác trong đó. Ví dụ: hãy xem xét cách Card chứa lệnh gọi tới Text trong ví dụ tối thiểu sau:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Cách triển khai nâng cao

Xem tài liệu tham khảo để biết định nghĩa API cho Card. Định nghĩa này xác định một số tham số cho phép bạn tuỳ chỉnh giao diện và hoạt động của thành phần.

Sau đây là một số tham số chính cần lưu ý:

  • elevation: Thêm bóng vào thành phần làm cho thành phần đó xuất hiện cao hơn phía trên nền.
  • colors: Sử dụng kiểu CardColors để thiết lập màu mặc định của cả vùng chứa và mọi phần tử con.
  • enabled: Nếu bạn truyền false cho tham số này, thẻ sẽ xuất hiện dưới dạng bị vô hiệu hoá và không phản hồi với hoạt động đầu vào của người dùng.
  • onClick: Thông thường, Card không chấp nhận các sự kiện nhấp chuột. Do đó, hàm quá tải chính mà bạn cần lưu ý là hàm quá tải xác định tham số onClick. Bạn nên sử dụng hàm quá tải này nếu muốn phương thức triển khai Card của mình phản hồi lại các thao tác nhấn mà người dùng thực hiện.

Ví dụ sau đây minh hoạ cách bạn có thể sử dụng các tham số này, cũng như các tham số phổ biến khác như shape và modifier.

Thẻ đã tô màu nền

Sau đây là ví dụ về cách bạn có thể triển khai thẻ đã tô màu nền.

Điều quan trọng ở đây là việc sử dụng thuộc tính colors để thay đổi màu nền đã tô.

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Phương thức triển khai có dạng như sau:

Một tấm thẻ được tô bằng màu sắc biến thể bề mặt từ giao diện Material.
Hình 2. Ví dụ về một thẻ đã tô màu nền.

Thẻ nâng cao

Đoạn mã sau đây trình bày cách triển khai thẻ nâng cao. Sử dụng thành phần kết hợp ElevatedCard dành riêng.

Bạn có thể sử dụng thuộc tính elevation để kiểm soát sự xuất hiện của độ cao và bóng tạo ra.

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Phương thức triển khai có dạng như sau:

Một thẻ được nâng lên phía trên nền của ứng dụng, có bóng.
Hình 3. Ví dụ về một thẻ nâng cao.

Thẻ có đường viền

Sau đây là ví dụ về một thẻ có đường viền. Sử dụng thành phần kết hợp OutlinedCard dành riêng.

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Phương thức triển khai có dạng như sau:

Một thẻ được viền bằng một đường viền mỏng màu đen.
Hình 4. Ví dụ về một thẻ có đường viền.

Hạn chế

Thẻ không đi kèm với các hành động vốn có như cuộn hoặc đóng, nhưng có thể tích hợp vào các thành phần kết hợp cung cấp các tính năng này. Ví dụ: để triển khai thao tác vuốt để loại bỏ trên thẻ, hãy tích hợp thẻ đó với thành phần kết hợp SwipeToDismiss. Để tích hợp thao tác cuộn, hãy sử dụng đối tượng sửa đổi Cuộn như verticalScroll. Xem Tài liệu về Cuộn để biết thêm thông tin.

Tài nguyên khác