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에 의해 정의된 올바른 세로 간격을 제공하기 위해 고정된 높이를 갖습니다.