Trang này được dịch bởi Cloud Translation API.

Huy hiệu

Sử dụng huy hiệu để hiển thị một phần tử hình ảnh nhỏ nhằm biểu thị trạng thái hoặc giá trị số trên một thành phần kết hợp khác. Sau đây là một số tình huống phổ biến mà bạn có thể sử dụng huy hiệu:

Thông báo: Hiển thị số lượng thông báo chưa đọc trên biểu tượng ứng dụng hoặc chuông thông báo.
Tin nhắn: Cho biết tin nhắn mới hoặc tin nhắn chưa đọc trong một ứng dụng trò chuyện.
Nội dung cập nhật trạng thái: Cho biết trạng thái của một tác vụ, chẳng hạn như "hoàn tất", "đang tiến hành" hoặc "không thành công".
Số lượng trong giỏ hàng: Hiển thị số lượng mặt hàng trong giỏ hàng của người dùng.
Nội dung mới: Làm nổi bật nội dung hoặc tính năng mới mà người dùng có thể sử dụng.

Ví dụ khác về thành phần huy hiệu. — **Hình 1.** Ví dụ về huy hiệu

Nền tảng API

Sử dụng thành phần kết hợp BadgedBox để triển khai huy hiệu trong ứng dụng. Cuối cùng, lớp này là một vùng chứa. Bạn có thể kiểm soát giao diện của nút này bằng hai tham số chính sau:

content: Nội dung thành phần kết hợp mà BadgedBox chứa. Thường là Icon.
badge: Thành phần kết hợp xuất hiện dưới dạng huy hiệu trên nội dung. Thông thường là thành phần kết hợp Badge chuyên dụng.

Ví dụ cơ bản

Đoạn mã này cho thấy cách triển khai cơ bản của BadgedBox:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}Badges.kt

Ví dụ này hiển thị một huy hiệu chồng lên thành phần kết hợp Icon được cung cấp. Lưu ý những nội dung sau trong mã:

BadgedBox đóng vai trò là vùng chứa tổng thể.
Đối số cho tham số badge của BadgedBox là Badge. Vì Badge không có đối số riêng, nên ứng dụng sẽ hiển thị huy hiệu mặc định là một vòng tròn nhỏ màu đỏ.
Icon đóng vai trò là đối số cho tham số content của BadgedBox. Đây là biểu tượng mà huy hiệu xuất hiện. Trong trường hợp này, đó là biểu tượng thư.

Giao diện sẽ như sau:

Huy hiệu đơn giản không chứa nội dung. — **Hình 2.** Việc triển khai huy hiệu ở mức tối thiểu.

Ví dụ chi tiết

Đoạn mã sau đây minh hoạ cách bạn có thể hiển thị các giá trị trong huy hiệu phản hồi các hành động của người dùng.

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}Badges.kt

Ví dụ này triển khai biểu tượng giỏ hàng có huy hiệu hiển thị số lượng mặt hàng trong giỏ hàng của người dùng.

BadgedBox chỉ hiển thị khi số lượng mặt hàng lớn hơn 0.
Các đối số cho containerColor và contentColor kiểm soát giao diện của huy hiệu.
Thành phần kết hợp Text cho khung nội dung của Badge xuất hiện trong huy hiệu. Trong trường hợp này, thẻ này hiển thị số lượng mặt hàng trong giỏ hàng.

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

Huy hiệu

Nền tảng API

Ví dụ cơ bản

Ví dụ chi tiết

Tài nguyên khác