배지를 사용하여 다른 컴포저블의 상태나 숫자 값을 나타내는 작은 시각적 요소를 표시합니다. 배지를 사용할 수 있는 몇 가지 일반적인 시나리오는 다음과 같습니다.
- 알림: 앱 아이콘이나 종 모양 알림 아이콘에 읽지 않은 알림 수를 표시합니다.
- 메시지: 채팅 애플리케이션 내의 새 메시지 또는 읽지 않은 메시지를 나타냅니다.
- 상태 업데이트: '완료', '진행 중', '실패'와 같은 작업 상태를 표시합니다.
- 장바구니 수량: 사용자의 장바구니에 있는 상품 수를 표시합니다.
- 새로운 콘텐츠: 새로운 콘텐츠 또는 사용자에게 제공되는 기능을 강조 표시합니다.
API 노출 영역
BadgedBox 컴포저블을 사용하여 애플리케이션에 배지를 구현합니다. 결국 컨테이너입니다 다음 두 가지 기본 매개변수를 사용하여 모양을 제어할 수 있습니다.
content:BadgedBox에 포함된 구성 가능한 콘텐츠입니다. 일반적으로Icon입니다.badge: 콘텐츠 위에 배지로 표시되는 컴포저블입니다. 일반적으로 전용Badge컴포저블입니다.
기본 예시
다음 코드 스니펫은 BadgedBox의 기본 구현을 보여줍니다.
@Composable
fun BadgeExample() {
BadgedBox(
badge = {
Badge()
}
) {
Icon(
imageVector = Icons.Filled.Mail,
contentDescription = "Email"
)
}
}
이 예에서는 제공된 Icon 컴포저블과 겹치는 배지를 표시합니다. 코드에서 다음 사항에 유의하세요.
BadgedBox는 전체 컨테이너 역할을 합니다.BadgedBox의badge매개변수 인수는Badge입니다.Badge에는 자체 인수가 없으므로 앱은 작은 빨간색 원인 기본 배지를 표시합니다.Icon는BadgedBox의content매개변수의 인수 역할을 합니다. 배지가 표시되는 아이콘입니다. 이 경우에는 메일 아이콘입니다.
다음과 같이 표시됩니다.
자세한 예
다음 스니펫은 사용자 작업에 응답하는 값을 배지에 표시하는 방법을 보여줍니다.
@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")
}
}
}
이 예에서는 사용자의 장바구니에 있는 항목 수를 표시하는 배지가 있는 장바구니 아이콘을 구현합니다.
BadgedBox는 항목 수가 0을 초과하는 경우에만 표시됩니다.containerColor및contentColor의 인수는 배지의 모양을 제어합니다.Badge의 콘텐츠 슬롯에 관한Text컴포저블은 배지 내에 표시됩니다. 여기서는 장바구니에 있는 항목의 수를 표시합니다.
이 구현은 다음과 같이 표시됩니다.
