创建卡片作为容器

Card 可组合项充当 UI 的 Material Design 容器。卡片呈现单个连贯的内容片段,例如

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

对单个内容片段的关注区分了Card与其他容器。例如,Scaffold为整个屏幕提供了一般的结构。Card是较大布局中的较小 UI 元素,而ColumnRow等布局组件提供了更简单、更通用的 API。

本主题将向您展示如何实现四种类型的卡片

版本兼容性

此实现要求您的项目 minSDK 设置为 API 级别 21 或更高。

依赖项

创建基本卡片

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

创建填充型卡片

这里的关键是使用colors属性来更改填充颜色

结果

A card is filled with the surface variant color from the material theme.
图 1. 填充型卡片示例。

创建凸起型卡片

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

您可以使用elevation属性来控制凸起的外观和由此产生的阴影。

结果

A card is elevated above the background of the app, with a shadow.
图 2. 凸起型卡片示例。

创建带边框型卡片

以下是带边框型卡片的示例。使用专用的OutlinedCard 可组合项。

结果

A card is outlined with a thin black border.
图 3. 带边框型卡片示例。

关键点

请参阅参考,了解Card的 API 定义。它定义了几个参数,您可以使用这些参数来自定义组件的外观和行为。

一些关键参数包括

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

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

包含本指南的收藏集

本指南是这些精选的快速指南收藏集的一部分,这些收藏集涵盖了更广泛的 Android 开发目标

了解可组合函数如何使您能够轻松创建基于 Material Design 设计系统的精美 UI 组件。

有问题或反馈?

访问我们的常见问题解答页面,了解快速指南,或联系我们,让我们知道您的想法。