卡

Card 可组合项充当界面的 Material Design 容器。卡片通常只会呈现一段连贯的内容。下面列举了一些示例来说明您可以在哪些情况下使用卡：

• 购物应用中的商品。
• 新闻应用中的新闻报道。
• 通信应用中的消息。

它专注于描绘一项内容，以便使 Card 有别于其他容器。例如，Scaffold 提供整个屏幕的通用结构。Card 通常是较大布局内的较小界面元素，而 Column 或 Row 等布局组件提供更简单且更通用的 API。

图 1. 填充了文本和图标的卡片示例。

基本实现方法

Card 的行为与 Compose 中其他容器非常相似。您可以通过调用其中的其他可组合项来声明其内容。例如，在下面的极简示例中，假设 Card 包含对 Text 的调用：

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

注意： 默认情况下，Card 将其内容封装在 Column 可组合项中，从而将卡片内的每项内容逐一放在另一项下。

高级实现方法

如需了解 Card 的 API 定义，请参阅参考文档。其中定义了多个参数，这些参数可用于自定义组件的外观和行为。

以下是需要注意的一些关键参数：

• elevation：向组件添加阴影，使其看起来高于背景。
• colors：使用 CardColors 类型设置容器及任何子项的默认颜色。
• enabled：如果您为此参数传递 false，则卡片会显示为已停用，并且不会响应用户输入。
• onClick：通常，Card 不接受点击事件。因此，您需要注意主要过载，它定义了一个 onClick 参数。如果您希望 Card 的实现响应用户的按压操作，则应使用此重载。

以下示例演示了如何使用这些参数以及其他常见参数（例如 shape 和 modifier）。

Beta 版 ：定义 onClick 参数的 Card 重载处于实验阶段。

填充卡片

以下示例说明了如何实现已填充的卡片。

关键在于使用 colors 属性更改填充颜色。

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

此实现如下所示：

图 2. 已填充卡片的示例。

上层卡片

以下代码段演示了如何实现提升的卡片。使用专用的 ElevatedCard 可组合项。

您可以使用 elevation 属性来控制高度的外观和生成的阴影。

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

此实现如下所示：

图 3. 凸起的卡片示例。

轮廓卡片

以下为轮廓卡片示例。使用专用 OutlinedCard 可组合项。

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

此实现如下所示：

图 4. 轮廓卡片示例。

限制

卡片本身没有滚动或关闭操作，但可以集成到提供这些功能的可组合项中。例如，如需在卡片上实现滑动关闭，请将其与 SwipeToDismiss 可组合项集成。如需与滚动功能集成，请使用滚动修饰符，例如 verticalScroll。如需了解详情，请参阅滚动文档。

其他资源

• Material 界面文档