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.
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ểuCardColors
để 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ềnfalse
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 khaiCard
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, ) } }
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.](https://developer.android.com/static/develop/ui/compose/images/components/card-filled.png?authuser=5&hl=vi)
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, ) } }
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.](https://developer.android.com/static/develop/ui/compose/images/components/card-elevated.png?authuser=5&hl=vi)
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, ) } }
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.](https://developer.android.com/static/develop/ui/compose/images/components/card-outlined.png?authuser=5&hl=vi)
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.