배지를 사용하여 다른 컴포저블에서 상태 또는 숫자 값을 나타내는 작은 시각적 요소를 표시합니다. 배지를 사용할 수 있는 몇 가지 일반적인 시나리오는 다음과 같습니다.
- 알림: 앱 아이콘 또는 알림 종 모양 아이콘에 읽지 않은 알림 수를 표시합니다.
- 메시지: 채팅 애플리케이션 내에서 새 메시지 또는 읽지 않은 메시지를 나타냅니다.
- 상태 업데이트: '완료됨', '진행 중', '실패함'과 같은 작업 상태를 표시합니다.
- 장바구니 수량: 사용자의 장바구니에 있는 상품 수를 표시합니다.
- 새 콘텐츠: 사용자가 사용할 수 있는 새 콘텐츠 또는 기능을 강조 표시합니다.
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컴포저블이 배지 내에 표시됩니다. 이 경우 장바구니에 있는 상품 수를 표시합니다.
이 구현은 다음과 같이 표시됩니다.
