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
属性将
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 变体颜色进行填充。](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-filled.png?authuser=5&hl=hu)
上层卡片
以下代码段演示了如何实现提升优先级卡片。使用
专用的 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, ) } }
此实现如下所示:
![卡片被提升到应用背景之上,并带有阴影。](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-elevated.png?authuser=5&hl=hu)
轮廓卡片
以下为轮廓卡片的示例。使用专用
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, ) } }
此实现如下所示:
![卡片带有黑色细边框。](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-outlined.png?authuser=5&hl=hu)
限制
卡片不提供固有的滚动或关闭操作,但可以集成到
提供这些功能的可组合项例如,实现滑动关闭
,请将其与 SwipeToDismiss
可组合项集成。为了集成
对于滚动,请使用滚动修饰符,例如 verticalScroll
。请参阅滚动
文档了解详情。