卡片

Card 组件包含有关单个主题的内容和操作。

剖析

卡片组件只有一个槽位。卡片可以包含图标、图片或标签，可由您自定义。

默认情况下，卡片是带有圆角和渐变背景的矩形。将卡片的最大高度设置为 60%，以确保卡片完全显示在屏幕上，因为圆形显示屏最多可裁剪屏幕顶部和底部的 20%。

标题卡片

使用标题卡片可在应用内显示消息等信息。标题卡片采用有三个槽位的布局，包括标题、可选的时间字段以及相关内容（图片或文本）。

应用卡片

使用应用卡片可显示多个应用中的互动元素。应用卡片采用有五个槽位的布局，包括应用图标、应用名称、activity 的发生时间、某种标题以及相关内容（图片或文本）。

设计建议

图片卡片

图片卡片显示与单个主题相关的内容并带有背景图片。图片卡片也可以显示单独的图片。

TitleCard(
    onClick = { ... },
    title = { Text("Workout") },
    backgroundPainter = CardDefaults.imageWithScrimBackgroundPainter(
        backgroundImagePainter = painterResource(id = R.drawable.backgroundimage)
    ),
    contentColor = MaterialTheme.colors.onSurface,
    titleColor = MaterialTheme.colors.onSurface
) {
    Text("12 songs · 1 Hour 32 mins")
}

尺寸

卡片宽度

卡片宽度默认为容器的最大宽度。

卡片高度

卡片高度可灵活设置，具体取决于组件的内容。

在圆形表盘上，卡片高度如果超过屏幕高度的 60%，将会被裁剪。