Jetpack Compose Glimmer 中的卡片

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

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

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

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

解剖结构和插槽

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

广告位 说明

标题

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

标题和副标题

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

前置图标

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

尾随图标

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

操作

主要互动元素（例如 Button）的槽位。

主要内容

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

卡片默认设置

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

示例：基本卡片

以下代码会创建一个基本卡片：

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

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

以下代码展示了如何将多个 slot 结合使用来构建卡片。

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

代码要点

  • 展示了如何利用各种卡片元素（例如 header、title、leadingIcon 和 action）自定义卡片的内容和结构。
  • 使用带有操作的标准 Card 重载，因为只有卡片（或其内部操作）需要可聚焦。如果您需要使整个卡片表面都具有互动性，请改用带有 onClick 的 Card 重载。
  • 此卡片使用操作 slot，因此卡片 surface 不可聚焦，焦点会定向到操作按钮。