Khối (chip)

Thành phần Chip là một phần tử trên giao diện người dùng nhỏ gọn, có tính tương tác. Thành phần này đại diện cho các thực thể phức tạp như người liên hệ hoặc thẻ, thường có biểu tượng và nhãn. Nó có thể kiểm tra được, đóng được hoặc nhấp được.

Sau đây là 4 loại khối và trường hợp bạn có thể sử dụng:

  • Hỗ trợ: Hướng dẫn người dùng trong một nhiệm 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 nhóm lựa chọn. Người dùng có thể chọn hoặc bỏ chọn các mục này và có thể thấy biểu tượng dấu kiểm khi chọn.
  • Thông tin đầu vào: Đại diện cho 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. Khối 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: Đưa ra đề 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 dữ liệu để nhắc người dùng thực hiện hành động.
Ví dụ về từng thành phần trong số 4 thành phần khối, trong đó có nêu bật các đặc điểm riêng biệt của từng thành phần.
Hình 1. Bốn thành phần 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ề 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, các phương thức này có chung các tham 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 biệt.
  • onClick: Hàm lambda mà khối gọi khi người dùng nhấn vào khối đó.

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 khối hỗ trợ nhằm hướng người dùng theo một hướng cụ thể. Một tính năng nổi bật là tham số leadingIcon cho phép bạn hiển thị 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(
                painter = rememberVectorPainter(AppIcons.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 hiển thị biểu tượng ở đầu và nhãn văn bả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 có thể chỉ hiện 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(
                    painter = rememberVectorPainter(AppIcons.Done),
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}

Phương thức triển khai có dạng như sau khi không được chọn:

Khối bộ lọc chưa được chọn, không có dấu kiểm và nền thuần tuý.
Hình 3. Đã bỏ chọn khối bộ lọc.

Và xuất hiện như sau khi được chọn:

Khối bộ lọc đã chọn, có dấu kiểm và nền màu.
Hình 4. Khối bộ lọc đã chọn.

Khối nhập dữ liệu

Bạn có thể sử dụng composable InputChip để tạo khối dựa trên 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 nhập có thể đại diện cho một người liên hệ mà người dùng đã thêm vào trường "Tới:".

Cách triển khai sau đây minh hoạ một khối thông tin đầu vào đã ở trạng thái được 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(
                painter = rememberVectorPainter(AppIcons.Person),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                painter = rememberVectorPainter(AppIcons.Close),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}

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

Khối nhập có hình đại diện và biểu tượng ở cuối.
Hình 5. Khối nhập liệu.

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ả 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 linh động. Ví dụ: trong một ứng dụng Trò chuyện với 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 xem xét cách triển khai SuggestionChip sau đây:

@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 đề xuất đơn giản.
Hình 6. Khối đề xuất.

Khối nổi bật

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 có 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:

Tài nguyên khác