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. Bạn có thể đánh dấu, đóng hoặc nhấp vào hộp đánh dấu.
Sau đây là 4 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 khi thực hiện 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.
- Bộ lọc: Cho phép người dùng tinh chỉnh nội dung trong một tập hợp các tuỳ 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ền tảng API
Có 4 thành phần kết hợp tương ứng với 4 loại khối. Các phần sau đây trình bày chi tiết về các thành phần kết hợp này và sự khác biệt giữa các thành phần kết hợp đó. Tuy nhiên, các chiến dịch này có chung các thông số sau:
label: Chuỗi xuất hiện trên khối.icon: Biểu tượng hiển thị ở đầu khối. Một số thành phần kết hợp cụ thể có tham sốleadingIconvàtrailingIconriêng biệt.onClick: Lambda mà khối gọi khi người dùng nhấn vào khối đó.
Khối trợ lý
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. Ví dụ sau đây minh hoạ cách bạn có thể triển khai:
@Composable
fun AssistChipExample() {
AssistChip(
onClick = { Log.d("Assist chip", "hello world") },
label = { Text("Assist chip") },
leadingIcon = {
Icon(
Icons.Filled.Settings,
contentDescription = "Localized description",
Modifier.size(AssistChipDefaults.IconSize)
)
}
)
}
Phương thức triển khai này có dạng như sau.
Thẻ 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 chỉ có thể hiển thị biểu tượng đánh dấu ở đầu khi người dùng đã chọn khối:
@Composable
fun FilterChipExample() {
var selected by remember { mutableStateOf(false) }
FilterChip(
onClick = { selected = !selected },
label = {
Text("Filter chip")
},
selected = selected,
leadingIcon = if (selected) {
{
Icon(
imageVector = Icons.Filled.Done,
contentDescription = "Done icon",
modifier = Modifier.size(FilterChipDefaults.IconSize)
)
}
} else {
null
},
)
}
Phương thức triển khai này sẽ xuất hiện như sau khi không được chọn:
Và sẽ xuất hiện như sau khi được chọn:
Khối đầu vào
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 đó.
@Composable
fun InputChipExample(
text: String,
onDismiss: () -> Unit,
) {
var enabled by remember { mutableStateOf(true) }
if (!enabled) return
InputChip(
onClick = {
onDismiss()
enabled = !enabled
},
label = { Text(text) },
selected = enabled,
avatar = {
Icon(
Icons.Filled.Person,
contentDescription = "Localized description",
Modifier.size(InputChipDefaults.AvatarSize)
)
},
trailingIcon = {
Icon(
Icons.Default.Close,
contentDescription = "Localized description",
Modifier.size(InputChipDefaults.AvatarSize)
)
},
)
}
Phương thức triển khai này có dạng như sau.
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:
@Composable
fun SuggestionChipExample() {
SuggestionChip(
onClick = { Log.d("Suggestion chip", "hello world") },
label = { Text("Suggestion chip") }
)
}
Phương thức triển khai có dạng như sau:
Khối nổi
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: