Jetpack Compose Glimmer에서 TitleChip 구성요소는 카드와 같은 연결된 콘텐츠에 간단하고 비대화형 라벨을 제공하도록 설계되었습니다. 제품명 칩을 사용하여 짧은 제품명, 이름, 상태와 같은 간결한 정보를 표시합니다. 제목 칩은 포커스 가능하거나 상호작용이 가능하지 않으므로 Jetpack Compose Glimmer UI 내에서 순전히 정보 제공 역할을 합니다. 예를 들어 스크롤 가능한 재료 목록 옆에 '재료'라는 라벨이 지정된 제목 칩을 제공할 수 있습니다.
기본 예: 짧은 제목 칩 표시
다음과 같이 코드를 조금만 사용하여 짧은 제목 칩을 만들 수 있습니다.
TitleChip { Text("Messages") }
자세한 예: 카드와 함께 제목 칩 표시하기
다른 구성요소와 함께 제목 칩을 사용하려면 컴포저블에서 다른 구성요소 위에 제목 칩 TitleChipDefaults.AssociatedContentSpacing을 배치하세요. 다음 코드는 카드를 사용하여 제목 칩을 사용하는 방법을 보여줍니다.
@Composable
fun TitleChipExample() {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
TitleChip { Text("Title Chip") }
Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
Card(
title = { Text("Title") },
subtitle = { Text("Subtitle") },
leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
Text("Card Content")
}
}
}
코드에 관한 핵심 사항
Spacer의 높이는 두 구성요소 간에TitleChipDefaults.AssociatedContentSpacing로 정의된 올바른 세로 간격을 제공하도록 고정되어 있습니다.