卡片

该 Card 可组合项充当 Material Design 中 UI 的容器。卡片通常呈现单个连贯的内容片段。以下是一些您可能使用卡片的示例

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

正是专注于描绘单个内容片段，才使 Card 与其他容器区分开来。例如，Scaffold 为整个屏幕提供通用结构。Card 通常是较大布局中较小的 UI 元素，而布局组件（如 Column 或 Row）则提供更简单、更通用的 API。

An elevated card populated with text and icons. — **图 1.** 一个包含文本和图标的卡片示例。

基本实现

Card 的行为与 Compose 中的其他容器非常相似。您可以通过在其中调用其他可组合项来声明其内容。例如，请考虑在以下最小示例中 Card 如何包含对 Text 的调用

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

高级实现

请参阅参考以获取 Card 的 API 定义。它定义了几个参数，允许您自定义组件的外观和行为。

一些需要注意的关键参数如下

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

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

填充卡片

以下是如何实现填充卡片的示例。

这里的关键是使用 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

此实现如下所示

A card is filled with the surface variant color from the material theme. — **图 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

此实现如下所示

A card is elevated above the background of the app, with a shadow. — **图 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

此实现如下所示

A card is outlined with a thin black border. — **图 4.** 带边框的卡片示例。

限制

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

其他资源

Material UI 文档