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 một giá trị số trên một thành phần kết hợp khác. Sau đây là một vài trường hợp phổ biến khi 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.
- Thông tin cập nhật trạng thái: Hiển thị trạng thái của việc cần làm, chẳng hạn như "hoàn thành", "in tiến trình", hoặc "không thành công".
- Số lượng giỏ hàng: Cho biết 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.
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 của bạn. Nó
về cơ bản sẽ là một vùng chứa. Bạn có thể kiểm soát giao diện của ứng dụng bằng hai tuỳ chọn chính
thông số:
content
: Nội dung thành phần kết hợp màBadgedBox
chứa. Giá thông thườngIcon
.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 là thành phần kết hợpBadge
dành riê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" ) } }
Ví dụ này cho thấy một huy hiệu chồng chéo với thành phần kết hợp Icon
đã cung cấp. Ghi chú
như sau trong mã:
BadgedBox
đóng vai trò là vùng chứa tổng thể.- Đối số cho tham số
badge
củaBadgedBox
làBadge
. VìBadge
không có đối số riêng nên ứng dụng sẽ hiện giá trị mặc định huy hiệu là một vòng tròn nhỏ màu đỏ. Icon
đóng vai trò là đối số cho tham sốcontent
củaBadgedBox
. Nó là biểu tượng mà huy hiệu xuất hiện trên đó. Trong trường hợp này, đó là biểu tượng thư.
Đây là cách mã xuất hiện:
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 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") } } }
Ví dụ này triển khai biểu tượng giỏ hàng với một 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ỉ xuất hiện 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 hình thức xuất hiện huy hiệu. - Thành phần kết hợp
Text
cho vị trí nội dung củaBadge
xuất hiện trong huy hiệu. Trong trường hợp này, giá trị này sẽ cho thấy số lượng mặt hàng trong giỏ hàng.
Phương thức triển khai có dạng như sau: