Khối (chip)

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. Lớp này đại diện cho các thực thể phức tạp như một địa chỉ liên hệ hoặc thẻ, thường kèm theo biểu tượng và nhãn. Nhãn này có thể đánh dấu, đó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 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 các lựa chọn. Bạn có thể chọn hoặc bỏ chọn các hộp đánh dấu này 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 trình đơn. 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 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 thao tác.
Ví dụ về từng thành phần trong 4 thành phần khối, trong đó nêu bật các đặc điểm riêng biệt.
Hình 1. Bốn thành phần của khối.

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ề những thành phần kết hợp này và sự khác biệt giữa các thành phần này. 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ố thành phần kết hợp cụ thể có tham số 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 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)
            )
        }
    )
}
Chip.kt

Phương thức triển khai có dạng như sau.

Một khối hỗ trợ đơn giản.
Hình 2. Khối hỗ trợ.

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
        },
    )
}
Chip.kt

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.
Hình 3. Đã bỏ chọn thẻ bộ lọc.

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.
Hình 4. Đã chọn thẻ bộ lọc.

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 phát sinh từ sự 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 người mà người dùng đã nhập địa chỉ vào trường "to:" (tới:).

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 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)
            )
        },
    )
}
Chip.kt

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.
Hình 5. Khối đầu vào.

Khối đề xuất

Thành phần kết hợp SuggestionChip là thành phần 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 đề xuất hiển thị gợi ý được tạo độ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 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") }
    )
}
Chip.kt

Phương thức triển khai có dạng như sau:

Một khối hỗ trợ đơn giản.
Hình 6. Khối hỗ trợ.

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 3 thành phần kết hợp sau:

Tài nguyên khác