Jetpack Compose Glimmer 中的卡片

适用的 XR 设备
本指南可帮助您为以下类型的 XR 设备打造优质体验。
了解 XR 设备类型 →
展示眼镜
了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，Card 组件充当相关内容的主要容器，为易于理解的信息单元创建清晰的视觉边界。卡片具有高度适应性，可支持主内容、可选标题、副标题以及前导或后随图标的组合。卡片默认会填充最大可用宽度，可聚焦，也可设为可点击。卡片支持垂直排列，其中标题图片位于最上方，后面依次是标题、副标题和正文内容。

卡片基于 Jetpack Compose Glimmer surface 系统构建，因此继承了深度效果、剪裁和一致的边框突出显示等物理属性。

图 1. Jetpack Compose Glimmer 中一些不同样式的卡片示例。

广告剖析和广告位

Jetpack Compose Glimmer 卡片由多个专用元素构建而成，可用于自定义其内容和布局。

广告位 说明

标题

卡片的顶部区域，用于放置图片。

标题和副标题

这些文本字段用于提供卡片的主要标签和辅助标签。标题位于副标题上方。

前置图标

显示在卡片内容区域开头的可选图标（通常为 Icon）。

尾随图标

显示在卡片内容区域末尾的可选图标。

主要内容

卡片的正文部分，用于放置主要 Text 或内容。

卡片默认设置

以下默认设置适用于卡片：

示例：基本卡片

以下代码展示了构建卡片所需的最少代码：

Card { Text("This is a card") }

示例：包含多个卡槽的卡片

以下代码展示了如何将多个 slot 搭配使用来构建卡片：

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

代码要点

  • 展示了如何使用各种卡片元素（例如 title、subtitle 和 leadingIcon）自定义卡片的内容和结构。
  • 使用 Card 重载和 onClick 使整个卡片界面具有互动性。

操作卡片

如果您想在卡片中添加操作按钮，请使用 ActionCard。操作卡片与标准卡片具有相同的元素，此外还包含一个用于定义底部按钮的额外 action 参数。

图 2. Jetpack Compose Glimmer 中的 ActionCard 示例。

示例：基本操作卡片

此代码展示了如何创建 ActionCard：

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

示例：带有图标的操作卡片

此代码展示了如何创建包含图标的更复杂的 ActionCard：

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}