[Card] 可组合项充当界面的 Material Design 容器。卡片通常只会呈现一段连贯的内容
基本实现方法
Card 的行为与 Compose 中其他容器非常相似。您可以通过调用其中的其他可组合项来声明其内容。例如,在下面的极简示例中,假设 Card 包含对 Text 的调用:
Card(modifier = Modifier
.padding(16.dp)) {
Text(text = "Hello, world!",modifier = Modifier
.padding(16.dp),
textAlign = TextAlign.Center)
}
高级实现方法
如需了解 Card 的 API 定义。其中定义了多个参数,这些参数可用于自定义组件的外观和行为。
以下是需要注意的一些关键参数:
elevation:向组件添加阴影,使其看起来高于背景。colors:使用CardColors类型设置容器及任何子项的默认颜色。enabled:如果您为此参数传递false,则卡片会显示为已停用,并且不会响应用户输入。onClick:通常,Card不接受点击事件。因此,您需要注意主要过载,它定义了一个onClick参数。如果您希望Card的实现响应用户的按压操作,则应使用此重载。
填充卡片
以下示例说明了如何实现已填充的卡片。
关键在于使用 colors 属性更改填充颜色。
上层卡片
ElevatedCard(
elevation = CardDefaults.cardElevation(
defaultElevation = 6.dp
),
modifier = Modifier
.size(width = 240.dp, height = 100.dp).padding(16.dp)
) {
Text(
text = "Elevated",
modifier = Modifier
.padding(16.dp),
textAlign = TextAlign.Center,
)
}