Compose UI 之 Card 卡片组件

Card

Card 是用于显示带有圆角和可选阴影的矩形内容容器。它通常用于构建用户界面，并可以包含标题、文本、图像、按钮等元素，表示界面上的可交互元素，我们称它是 “卡片”。

Card 使用的一些经典的场景：

• 列表数据，例如 新闻列表，产品列表等。
• 信息提示框，使用 Card 组件突出显示。
• 内容详情页卡片。

出上面列出的 3 中场景，还有其较多的场景可以使用卡片组件，这里不再一一列出。

Compose UI 库中定义了 3 种样式的卡片组件。分别是 Filled Card，Elevated Card，Outlined Card。3 种卡片的设计准则是一致的。

属性	值
外形（shape）	12dp 大小的圆角
左右内边距（left/right padding）	16dp
卡片组件之间的间距	最大 8dp
标签对齐方式	Start-aligned：靠左或靠右（在一些文字从右向左的国家）

它们执行后的样式有所区别。

默认情况下，Card 中的子 composables 布局在一个 column 中，即子 composables 是在竖直方向上一个个排列。

Filled Card

先看下它的声明，它有两个声明方式。

// 下面这个声明的 Card 不接收事件，只用作展示详情信息。
@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    elevation: CardElevation = CardDefaults.cardElevation(),  // 默认值是没有阴影的。
    border: BorderStroke? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

// 下面的声明可以用于交互，设置 Card 的可用性。
@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    elevation: CardElevation = CardDefaults.cardElevation(),  // 默认值是没有阴影的。
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

上述：

• 第一个声明是用于展示详情信息使用，不处理点击事件。
• 第二个声明可以接收点击事件，并可以定义点击回调。

声明中主要的参数说明如下表。

参数名	类型	描述
modifier	Modifier	修改或增强组件的某些属性，例如大小、位置、背景等。默认值是Modifier，表示不使用任何特定的修饰符。
shape	Shape	定义卡片的形状。默认是CardDefaults.shape，这通常是一个带有圆角的矩形。
colors	CardColors	定义卡片的颜色方案。这包括卡片的背景颜色、边框颜色等。默认值是CardDefaults.cardColors()，它提供了一套默认的颜色配置。
elevation	CardElevation	定义卡片的阴影或“高度”。这可以给卡片一个立体的外观。默认值是CardDefaults.cardElevation()，它定义了一个默认的阴影效果。
border	BorderStroke?	定义卡片的边框样式，如宽度、颜色和形状。默认是null，表示没有边框。
content	@Composable ColumnScope.() -> Unit	这是一个Lambda函数，定义了卡片内部的内容。由于它是在ColumnScope中定义的，所以你可以在卡片内部添加列式布局的内容。
interactionSource	MutableInteractionSource?	与用户交互相关的状态源，如按下、拖动等。这可以用于创建更复杂的交互效果。默认是null。
onClick	() -> Unit	这是一个Lambda函数，当用户点击卡片时会被调用。你可以在这里定义点击卡片后应执行的操作。
enabled	Boolean	表示卡片是否可以被用户交互。默认为true，意味着卡片默认是可以交互的。

从上述参数列表中，可以看出，第二个声明方式兼容了第一个声明的方式，将 enabled 参数给值 false 并且设置好 colors 参数值，就可以实现与第一个声明同样的效果。

看以下第一个 Card 声明的使用示例如下。

@Composable
fun CardNonclickableSample() {
   
    Box (modifier=Modifier.fillMaxSize().padding(16.dp), contentAlignment = Alignment.Center) {
   
        Card(
            modifier = Modifier.width(250.dp).height(100.dp).background(color=Color.Yellow).padding(5.dp),
            shape = RoundedCornerShape(8.dp),
            colors = CardDefaults.cardColors(containerColor = Color.White, contentColor = Color.DarkGray),
            elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
            border = BorderStroke(width=2.dp, brush = SolidColor(Color.Green)),
        ) {
   
            Text("这是一个Card组件示例", modifier=Modifier.padding(