在 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定義兩個元件之間的間距。