Jetpack Compose Glimmer 中的標題晶片

適用的 XR 裝置
這份指南可協助您為這類 XR 裝置打造體驗。
瞭解 XR 裝置類型 →
顯示眼鏡
瞭解 XR 裝置類型 →

在 Jetpack Compose Glimmer 中，TitleChip 元件是不具互動性的元件，可為相關聯的內容提供簡短的脈絡或標籤，例如 Card 或 VerticalList。

使用標題資訊方塊顯示簡潔的資訊，例如簡短名稱、類別名稱或狀態指標。一般來說，您應將標題資訊方塊放在所描述內容的上方，建立清楚的結構關係。

圖 1. 以下是 Jetpack Compose Glimmer 中的預設樣式標題方塊和固定標題方塊範例。每個標題晶片都有標籤 (1) 和選用的前置圖示或實體 (2)。

基本範例：建立簡短名稱方塊

下列程式碼會建立基本標題晶片：

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}

基本範例：建立含有圖示的標題資訊方塊

下列程式碼會建立含有圖示的標題晶片：

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}

範例：建立含有資訊卡的標題方塊

如要將標題晶片與其他元件搭配使用，請在可組合函式中，將標題晶片 TitleChipDefaults.associatedContentSpacing 放在其他元件上方。以下程式碼會建立含有資訊卡的標題資訊方塊：

@Composable
fun TitleChipWithCardSample() {
    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 定義的。
  • 使用選用的 leadingIcon 在文字內容前加入額外的視覺背景資訊。
  • 標題資訊方塊會自動為文字套用 caption 樣式。
  • 標題資訊方塊無法互動。如需可點選的標籤，請使用 Button 或其他互動式元件。