Thành phần Chip
là một phần tử nhỏ gọn trên giao diện người dùng có tính tương tác. Nó đại diện cho sự phức tạp
các mục như địa chỉ liên hệ hoặc thẻ, thường có biểu tượng và nhãn. Có thể
có thể đánh dấu, có thể đóng hoặc nhấp vào.
Sau đây là 4 loại khối và vị trí bạn có thể sử dụng:
- Hỗ trợ: Hướng dẫn người dùng trong quá trình thực hiện thao tác. Thường xuất hiện dưới dạng 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 từ một tập hợp các lựa chọn. Chúng có thể được chọn hoặc bỏ chọn và có thể bao gồm biểu tượng dấu kiểm khi được chọn.
- Đầu vào: Biểu thị thông tin do người dùng cung cấp, chẳng hạn như các lựa chọn trong một . Chúng có thể chứa biểu tượng và văn bản, đồng thời cung cấp 'X' để xoá.
- Đề xuất: Đưa ra đề xuất cho người dùng dựa trên các đề xuất gần đây hoặc hoạt động đầu vào. Thường xuất hiện bên dưới trường nhập dữ liệu để nhắc người dùng 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. Chiến lược phát hành đĩa đơn các phần sau đây trình bày chi tiết các thành phần kết hợp này và sự khác biệt của chúng. Tuy nhiên, chúng có chung các tham số sau:
label
: Chuỗi xuất hiện trên khối.icon
: Biểu tượng xuất hiện ở đầu khối. Một số các thành phần kết hợp cụ thể cóleadingIcon
vàtrailingIcon
riêng biệt .onClick
: Hàm lambda mà khối này gọi khi người dùng nhấn vào.
Khối hỗ trợ
Thành phần kết hợp AssistChip
đưa ra một cách thức đơn giản để tạo một
chip hỗ trợ nhắc người dùng theo một hướng cụ thể. Một cách phân biệt
tính năng 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 có dạng như sau.
![Một khối hỗ trợ đơn giản.](https://developer.android.com/static/develop/ui/compose/images/components/chip-assist.png?authuser=19&hl=vi)
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 này có hay không
được chọn. Ví dụ sau đây minh hoạ cách bạn có thể hiển thị
biểu tượng đã đánh dấu chỉ 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 }, ) }
Cách triển khai này xuất hiện như sau khi bị bỏ chọn:
![Một thẻ bộ lọc chưa được chọn, không có dấu kiểm và nền kế hoạch.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter.png?authuser=19&hl=vi)
Và xuất hiện như sau khi được chọn:
![Một thẻ bộ lọc đã chọn có dấu kiểm và nền được tô màu.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=19&hl=vi)
Khối thông tin đầ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ừ
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 một
email thì khối nhập có thể đại diện cho một người có địa chỉ mà người dùng đã nhập
vào nút "để:" .
Cách triển khai sau đây minh hoạ một khối đầu vào đã có trong trạng thái đã chọn. Người dùng đóng khối khi họ nhấn vào.
@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 có dạng như sau.
![Một khối thông tin đầu vào có hình đại diện và biểu tượng theo sau.](https://developer.android.com/static/develop/ui/compose/images/components/chip-input.png?authuser=19&hl=vi)
Khối đề xuất
Thành phần kết hợp SuggestionChip
là thành phần cơ bản nhất trong các thành phần kết hợp được liệt kê
trên trang này, cả về định nghĩa API lẫn các trường hợp sử dụng phổ biến của API đó. Đề xuất
khối hiển thị gợi ý được tạo linh động. Ví dụ: trong một ứng dụng trò chuyện AI, bạn
có thể sử dụng khối đề xuất để đưa ra câu trả lời khả thi cho những câu hỏi 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:
![Một khối hỗ trợ đơn giản.](https://developer.android.com/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=19&hl=vi)
Khối nâng cao
Tất cả ví dụ trong tài liệu này đều sử dụng thành phần kết hợp cơ sở để lấy mẫu ngoại hình. 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: