Card
可组合项可充当界面的 Material Design 容器。卡片通常呈现一段连贯的内容。下面列举了一些可以使用卡片的情形:
- 购物应用中的产品。
- 新闻应用中的新闻报道。
- 通信应用中的消息。
它侧重于描绘将 Card
与其他容器区分开来的一段内容。例如,Scaffold
提供了整个屏幕的一般结构。卡片通常是较大布局内的较小界面元素,而 Column
或 Row
等布局组件可提供更简单、更通用的 API。
基本实现方法
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, ) } }
此实现如下所示:
上层卡片
以下代码段演示了如何实现提升优先级卡片。使用专用的 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, ) } }
此实现如下所示:
轮廓卡片
以下为轮廓卡片的示例。使用专用的 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, ) } }
此实现如下所示:
限制
卡片不具备固有的滚动或关闭操作,但可以集成到提供这些功能的可组合项中。例如,如需实现卡片上的滑动关闭手势,请将其与 SwipeToDismiss
可组合项集成。如需与滚动集成,请使用滚动修饰符,例如 verticalScroll
。如需了解详情,请参阅滚动文档。