在 Jetpack Compose Glimmer 中，Card 元件的設計目的是將相關資訊分組，並顯示在單一單元中。資訊卡具有高度適應性，可支援主要內容、選用標題和副標題，以及開頭或結尾圖示的組合。資訊卡預設會填滿 AI 眼鏡螢幕的完整寬度上限，且可聚焦，也能設為可點選。
卡片結構和插槽
Jetpack Compose Glimmer Card 是由多個專用元素建構而成，可供您自訂內容和版面配置。
標題：卡片的頂端部分，用於放置圖片。
標題和副標題：這些文字欄位提供資訊卡的主要和次要標籤。
前置圖示：顯示在資訊卡內容區域開頭的選用圖示。
尾端圖示：選用圖示，會顯示在資訊卡內容區域的尾端。
動作：主要互動元素 (例如按鈕) 的位置。使用者可直接從資訊卡執行動作。這個版位適用於 Card 可組合項目的個別多載。
主要內容：資訊卡的核心主體，您可以在這裡放置主要文字或其他內容。
基本範例：建立基本資訊卡
您可以使用極少的程式碼建立非常基本的資訊卡：
Card { Text("This is a card") }
詳細範例：顯示複雜的資訊卡
下列程式碼顯示如何一起使用多個 slot 建構資訊卡。並說明如何將 Card 與 TitleChip 配對。
@Composable
fun SampleGlimmerCard() {
val myHeaderImage = painterResource(id = R.drawable.header_image)
Column(horizontalAlignment = Alignment.CenterHorizontally) {
TitleChip { Text("Title Chip") }
Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
Card(
action = {
Button(onClick = {}) {
Text("Action Button")
}
},
header = {
Image(
painter = myHeaderImage,
contentDescription = "Header image for the card",
contentScale = ContentScale.FillWidth
)
},
title = { Text("Card Title") },
subtitle = { Text("Card Subtitle") },
leadingIcon = { FavoriteIcon, "Localized description" },
trailingIcon = { FavoriteIcon, "Localized description" }
) {
Text("A Jetpack Compose Glimmer Card using all available slots")
}
}
}
程式碼重點
- 說明如何運用各種資訊卡元素 (例如
header、title、subtitle、leadingIcon和action)，自訂資訊卡的內容和結構。 - 顯示如何放置
TitleChip和使用Spacer的範例。