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 Chip là một phần tử giao diện người dùng nhỏ gọn, tương tác. Nó đại diện cho các thực thể phức tạp như một người liên hệ hoặc thẻ, thường có biểu tượng và nhãn. Hộp đánh dấu có thể được đánh dấu, đóng hoặc nhấp vào.
Sau đây là 5 loại khối và nơi bạn có thể sử dụng các khối đó:
Hỗ trợ: Hướng dẫn người dùng trong một tác vụ. Thường xuất hiện dưới dạng một phần tử giao diện người dùng tạm thời để phản hồi hoạt động đầu vào của người dùng.
Lọc: Cho phép người dùng tinh chỉnh nội dung trong một nhóm lựa chọn. Bạn có thể chọn hoặc bỏ chọn các mục này và có thể thêm biểu tượng dấu kiểm khi chọn.
Đầu vào: Biểu thị thông tin do người dùng cung cấp, chẳng hạn như lựa chọn trong trình đơn. Các nút này có thể chứa biểu tượng và văn bản, đồng thời cung cấp biểu tượng "X" để xoá.
Đề xuất: Cung cấp đề xuất cho người dùng dựa trên hoạt động hoặc thông tin đầu vào gần đây của họ. Thường xuất hiện bên dưới trường nhập để nhắc người dùng thực hiện hành động.
Nâng cao: Có giao diện nâng cao thay vì trông phẳng.
Khả năng tương thích của phiên bản
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 khối hỗ trợ
Thành phần kết hợp AssistChip cung cấp một cách đơn giản để tạo chip hỗ trợ giúp người dùng đi theo một hướng cụ thể. Một tính năng khác biệt là tham số leadingIcon cho phép bạn hiển thị một biểu tượng ở bên trái của khối, như minh hoạ trong hình 1. Ví dụ sau đây minh hoạ cách bạn có thể triển khai:
Hình 1. Khối Trợ lý.
Tạo khối bộ lọc
Thành phần kết hợp FilterChip yêu cầu bạn theo dõi xem khối có được chọn hay không. Ví dụ sau đây minh hoạ cách bạn có thể chỉ hiển thị biểu tượng đánh dấu ở đầu khi người dùng đã chọn khối:
Kết quả
Hình 2. Khối bộ lọc chưa được chọn.Hình 3. Khối bộ lọc đã chọn.
Tạo khối nhập
Bạn có thể sử dụng thành phần kết hợp InputChip để tạo các khối kết quả từ lượt tương tác của người dùng. Ví dụ: trong ứng dụng email, khi người dùng đang viết email, khối nhập có thể đại diện cho một người mà người dùng đã nhập địa chỉ của người đó vào trường "to:" (đến).
Cách triển khai sau đây minh hoạ một khối đầu vào ở trạng thái đã chọn. Người dùng đóng khối khi nhấn vào khối đó.
Kết quả
Hình 4. Khối đầu vào.
Tạo khối đề xuất
Thành phần kết hợp SuggestionChip là thành phần kết hợp cơ bản nhất trong số các thành phần kết hợp được liệt kê trên trang này, cả trong định nghĩa API và các trường hợp sử dụng phổ biến. Khối gợi ý trình bày các gợi ý được tạo động. Ví dụ: trong một ứng dụng trò chuyện bằng AI, bạn có thể sử dụng khối đề xuất để trình bày các câu trả lời có thể có cho tin nhắn gần đây nhất.
Hãy cân nhắc cách triển khai SuggestionChip sau:
Kết quả
Hình 5. Khối Trợ lý.
Tạo khối nâng cao
Tất cả ví dụ trong tài liệu này đều sử dụng các thành phần kết hợp cơ sở có giao diện phẳng. Nếu bạn muốn một khối có giao diện nâng cao, hãy sử dụng một trong ba thành phần kết hợp sau:
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.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-02-06 UTC."],[],[],null,["\u003cbr /\u003e\n\nThe `Chip` component is a compact, interactive UI element. It represents complex\nentities like a contact or tag, often with an icon and label. It can be\ncheckable, dismissible, or clickable.\n\nThe five types of chips and where you might use them are as follows:\n\n- [Assist](#assist): Guides the user during a task. Often appears as a temporary UI element in response to user input.\n- [Filter](#filter): Lets users refine content from a set of options. They can be selected or deselected, and may include a checkmark icon when selected.\n- [Input](#input): Represents user-provided information, such as selections in a menu. They can contain an icon and text, and provide an 'X' for removal.\n- [Suggestion](#suggestion): Provides recommendations to the user based on their recent activity or input. Typically appear beneath an input field to prompt user actions.\n- [Elevated](#elevated): Has an elevated appearance instead of looking flat.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate an assist chip\n\nThe [`AssistChip`](/reference/kotlin/androidx/compose/material3/package-summary#AssistChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable provides a straightforward way to create an\nassist chip that nudges the user in a particular direction. One distinguishing\nfeature is its `leadingIcon` parameter that lets you display an icon on the left\nside of the chip, as shown in figure 1. The following example demonstrates how\nyou can implement it:\n**Figure 1.** Assist chip.\n\nCreate a filter chip\n\nThe [`FilterChip`](/reference/kotlin/androidx/compose/material3/package-summary#FilterChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable requires you to track whether or not the chip\nis selected. The following example demonstrates how you can show a leading\nchecked icon only when the user has selected the chip:\n\nResults **Figure 2.** Unselected filter chip. **Figure 3.** Selected filter chip.\n\nCreate an input chip\n\nYou can use the [`InputChip`](/reference/kotlin/androidx/compose/material3/package-summary#InputChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable to create chips that result from\nuser interaction. For example, in an email client, when the user is writing an\nemail, an input chip might represent a person whose address the user has entered\ninto the \"to:\" field.\n\nThe following implementation demonstrates an input chip that is in a selected\nstate. The user dismisses the chip when they press it.\n| **Note:** Consider how you might use a chip like this in the preceding email use case, with a name passed in for the `text` parameter, and a function that performs the necessary network calls for `onDismiss`.\n\nResults **Figure 4.** Input chip.\n\nCreate a suggestion chip\n\nThe [`SuggestionChip`](/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable is the most basic of the composables listed\non this page, both in its API definition and its common use cases. Suggestion\nchips present dynamically generated hints. For example, in an AI chat app, you\nmight use suggestion chips to present possible responses to the most recent\nmessage.\n\nConsider this implementation of `SuggestionChip`:\n\nResults **Figure 5.** Assist chip. **Note:** Although the suggestion chip component is intended for informational purposes, it does still take an `onClick` lambda that you can use to create interactivity.\n\nCreate an elevated chip\n\nAll the examples in this document use the base composables that take a flat\nappearance. If you want a chip that has an elevated appearance, use one of the\nthree following composables:\n\n- [`ElevatedAssistChip`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedAssistChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource))\n- [`ElevatedFilterChip`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedFilterChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource))\n- [`ElevatedSuggestionChip`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedSuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource))\n\nKey points\n\nFour composables correspond to the four types of chips, and they share the\nfollowing parameters:\n\n- **`label`**: The string that appears on the chip.\n- **`icon`** : The icon displayed at the start of the chip. Some composables have a separate `leadingIcon` and `trailingIcon` parameter.\n- **`onClick`**: The lambda that the chip calls when the user clicks it.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \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 \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)"]]
