在 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定義)，介於兩個元件之間。