在 Jetpack Compose Glimmer 中，Card 组件旨在将相关信息分组在一个单元中进行展示。卡片具有高度适应性，可支持主内容、可选标题和副标题以及前导或后随图标的组合。卡片默认会填充 AI 眼镜显示屏的最大宽度，可聚焦，也可设为可点击。
卡片结构和卡槽
Jetpack Compose Glimmer 卡片由多个专用元素构建而成，可让您自定义其内容和布局。
标题：卡片的顶部区域，用于放置图片。
标题和副标题：这些文本字段用于提供卡片的主要标签和次要标签。
前导图标：显示在卡片内容区域开头的可选图标。
尾随图标：显示在卡片内容区域末尾的可选图标。
操作：主要交互元素（例如按钮）的槽位。这样，用户就可以直接从卡片执行操作。该槽位可在 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的示例。