Thành phần Chip
là một thành phần nhỏ gọn, có tính tương tác trên giao diện người dùng. Thuộc tính này đại diện cho các thực thể phức tạp, chẳng hạn như mục liên hệ hoặc thẻ, thường kèm theo biểu tượng và nhãn. Thông tin này có thể đánh dấu, đóng được hoặc nhấp vào được.
Dưới đâ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 khi thực hiện tác vụ. Thường xuất hiện dưới dạng một phần tử tạm thời trên giao diện người dùng để 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 lựa chọn. Bạn có thể chọn hoặc bỏ chọn các mục này và có thể bao gồm một 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ư các lựa chọn trong một trình đơn. Chúng có thể chứa biểu tượng và văn bản, đồng thời cung cấp dấu 'X' để xoá.
- Đề xuất: Đưa ra các đề xuất cho người dùng dựa trên hoạt động hoặc hoạt động đầu vào gần đây của họ. Thường xuất hiện bên dưới một trường nhập dữ liệu để nhắc người dùng thực hiện các 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 chúng. Tuy nhiên, chúng 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ốleadingIcon
vàtrailingIcon
riêng.onClick
: Hàm lambda mà khối gọi khi người dùng nhấn và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 một khối hỗ trợ nhắc người dùng theo một hướng cụ thể. Một tính năng phân 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 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 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 xuất hiện như sau khi được bỏ chọn:
Và 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 từ hoạt động 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 đầu vào có thể đại diện cho một người có địa chỉ mà người dùng đã nhập vào trường "to:".
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 sẽ đó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 có dạng như sau.
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 và các trường hợp sử dụng phổ biến. Khối đề xuất trình bày các gợi ý được tạo động. Ví dụ: trong ứng dụng trò chuyện bằng AI, bạn có thể sử dụng khối đề xuất để đưa ra 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âng cao
Tất cả cá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 dùng một trong 3 thành phần kết hợp sau: