Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
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ẻ trình bày một phần nội dung mạch lạc duy nhất, chẳng hạn như:
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. 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.
Chủ đề này hướng dẫn bạn cách triển khai 4 loại thẻ:
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Tạo thẻ 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:
Tạo thẻ đã điền sẵ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ô:
Kết quả
Hình 1. Ví dụ về một thẻ đã tô màu nền.
Tạo 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.
Kết quả
Hình 2. Ví dụ về một thẻ nâng cao.
Tạo 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.
Kết quả
Hình 3. Ví dụ về một thẻ có đường viền.
Điểm chính
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ố mà bạn có thể sử dụng để 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:
elevation: Thêm bóng vào thành phần làm cho thành phần đó trông cao hơ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. Sử dụng phương thức nạp chồng này khi bạn muốn phương thức triển khai Card phản hồi các lượt nhấp của người dùng.
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. Hãy xem tài liệu về Scroll để biết thêm thông tin.
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
Hiển thị các thành phần tương tác
Tìm hiểu cách các hàm có khả năng kết hợp giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-02-06 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-02-06 UTC."],[],[],null,["# Create a card as a container\n\n\u003cbr /\u003e\n\nThe [`Card`](/reference/kotlin/androidx/compose/material3/package-summary#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)) composable acts as a Material Design container for your UI.\nCards present a single coherent piece of content, such as:\n\n- A product in a shopping app.\n- A news story in a news app.\n- A message in a communications app.\n\nThe focus on portraying a single piece of content distinguishes\n`Card` from other containers. For example, `Scaffold` provides general structure\nto a whole screen. Card is a smaller UI element inside a larger\nlayout, whereas a layout component such as `Column` or `Row` provides a simpler\nand more generic API.\n\nThis topic shows you how to implement four types of cards:\n\n- [Basic](#basic)\n- [Filled](#filled)\n- [Elevated](#elevated)\n- [Outlined](#outlined)\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a basic card\n-------------------\n\n`Card` behaves much like other containers in Compose. You declare its content by\ncalling other composables within it. For example, consider how `Card` contains a\ncall to `Text` in the following minimal example:\n\n @Composable\n fun CardMinimalExample() {\n Card() {\n Text(text = \"Hello, world!\")\n }\n }\n\n| **Note:** By default, a `Card` wraps its content in a `Column` composable, placing each item inside the card beneath one another.\n\nCreate a filled card\n--------------------\n\nThe key here is the use of the `colors` property to change the filled\ncolor:\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun FilledCardExample() {\n Card(\n colors = CardDefaults.cardColors(\n containerColor = MaterialTheme.colorScheme.surfaceVariant,\n ),\n modifier = Modifier\n .size(width = 240.dp, height = 100.dp)\n ) {\n Text(\n text = \"Filled\",\n modifier = Modifier\n .padding(16.dp),\n textAlign = TextAlign.Center,\n )\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L106-L122\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 1.** Example of a filled card.\n\nCreate an elevated card\n-----------------------\n\nThe following snippet demonstrates how to implement an elevated card. Use the\ndedicated [`ElevatedCard`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,kotlin.Function1)) composable.\n\nYou can use the `elevation` property to control the appearance of elevation and\nthe resulting shadow.\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun ElevatedCardExample() {\n ElevatedCard(\n elevation = CardDefaults.cardElevation(\n defaultElevation = 6.dp\n ),\n modifier = Modifier\n .size(width = 240.dp, height = 100.dp)\n ) {\n Text(\n text = \"Elevated\",\n modifier = Modifier\n .padding(16.dp),\n textAlign = TextAlign.Center,\n )\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L85-L101\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 2.** Example of an elevated card.\n\nCreate an outlined card\n-----------------------\n\nThe following is an example of an outlined card. Use the dedicated\n[`OutlinedCard`](/reference/kotlin/androidx/compose/material3/package-summary#OutlinedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)) composable.\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun OutlinedCardExample() {\n OutlinedCard(\n colors = CardDefaults.cardColors(\n containerColor = MaterialTheme.colorScheme.surface,\n ),\n border = BorderStroke(1.dp, Color.Black),\n modifier = Modifier\n .size(width = 240.dp, height = 100.dp)\n ) {\n Text(\n text = \"Outlined\",\n modifier = Modifier\n .padding(16.dp),\n textAlign = TextAlign.Center,\n )\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L127-L144\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 3.** Example of an outlined card.\n\nKey points\n----------\n\nSee the [reference](/reference/kotlin/androidx/compose/material3/package-summary#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)) for the API definition of `Card`. It defines several\nparameters that you can use to customize the appearance and behavior of the\ncomponent.\n\nSome key parameters include:\n\n- **`elevation`**: Adds a shadow to the component that makes it look elevated above the background.\n- **`colors`** : Uses the `CardColors` type to set the default color of both the container and any children.\n- **`enabled`** : If you pass `false` for this parameter, the card appears as disabled and does not respond to user input.\n- **`onClick`** : Ordinarily, a `Card` does not accept click events. As such, the primary overload you would like to note is that which defines an `onClick` parameter. Use this overload when you want your implementation of `Card` to respond to clicks from the user.\n\n| **Beta:** The `Card` overload that defines the `onClick` parameter is experimental.\n\nCards don't come with inherent scroll or dismiss actions, but can integrate into\ncomposables offering these features. For example, to implement swipe to dismiss\non a card, integrate it with the [`SwipeToDismiss`](/reference/kotlin/androidx/compose/material3/package-summary#SwipeToDismiss(androidx.compose.material3.DismissState,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.collections.Set)) composable. To integrate\nwith scroll, use scroll modifiers such as [`verticalScroll`](/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)). See the [`Scroll`\ndocumentation](/develop/ui/compose/touch-input/pointer-input/scroll) for more information.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
