Card 可组合项可充当界面的 Material Design 容器。 卡片通常呈现一段连贯的内容。以下是 卡片的适用位置示例:

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

它侧重于描绘一项内容, 来自其他容器的 Card。例如,Scaffold 提供了通用结构 整个屏幕卡片通常是较小的界面元素 布局组件,而 ColumnRow 等布局组件则提供更简单的 和更通用的 API。

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

基本实现方法

Card 的行为与 Compose 中的其他容器非常相似。声明其内容的方式 调用其中的其他可组合项。例如,假设 Card 是如何包含 在下面这个极为简单的示例中调用 Text

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

高级实现方法

如需了解 Card 的 API 定义,请参阅参考文档。它定义了 通过这些参数,您可以自定义 组件。

下面是一些需要注意的关键参数:

  • elevation:向组件添加阴影,使其看起来高于背景。
  • colors:使用 CardColors 类型设置这两种颜色的默认颜色 容器及其所有子容器
  • enabled:如果您为此参数传递 false,卡片会显示为 不会响应用户输入。
  • onClick:通常,Card 不接受点击事件。因此 您要注意的主要重载是它定义了一个 onClick 参数。如果您希望 Card 的实现,以响应用户的按下操作。

以下示例演示了如何使用这些参数 shapemodifier 等其他常见参数。

填充卡片

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

这里的关键在于使用 colors 属性将 color 决定。

@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,
        )
    }
}

此实现如下所示:

卡片会使用来自 Material 主题中的 Surface 变体颜色进行填充。
图 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,
        )
    }
}

此实现如下所示:

卡片高于应用背景,并带有阴影。
图 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,
        )
    }
}

此实现如下所示:

卡片带有黑色细边框。
图 4. 轮廓卡片示例。

限制

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

其他资源